html - How do browsers calculate width when child depends on parent, and parent's depends on child's

Question

I'm experiencing various glitches, weird rendering artifacts and so forth on my React application and was wondering about the way defining dimensions works from a browser's point of view.

Let's say I have a grid display, and there's a div which has grid-template-columns: 1fr auto 1fr and a child div which has spans grid-column: 2 / 3 - in other words spanning in the auto area of the parent grid.

As I understand, the value auto in grid template columns defines the column to be sized to fit its contents.

Now let's add an img with the max-width set to 100% - in other words, we don't want to exceed the size of the parent container.

However, the parent container's width is determined by the auto rule - so how can the browser let the child know to take up 100%?

Example

.box {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background-color: lightblue;
}

.box>div {
  border: 1px solid red;
  grid-column: 2 / 3;
  margin: 10px 10px 0px;
}

<div class="box">
  <div style="">
    <img src="https://via.placeholder.com/800" style="max-width:100%">
  </div>
</div>

Answer 1

To explain this, I will start with a more simplified example that will produce the same output:

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100">
</div>

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100" style="max-width:100%">
</div>

<div style="display:inline-block">
  <!-- even a big explicit width specified won't change the behavior -->
  <img src="https://via.placeholder.com/1000x100" style="wdith:2000px;max-width:100%">
</div>

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100" style="width:100%">
</div>