how is a flex-basis calculated when the flex item's width is 100%?

Question

The initial value of flex-basis is automatically sized based on the contents of the flex items. And the content img element depends on the width of the parent element ( width: 100% ). In other words, an infinite loop of reference occurs between the flex item and the img element.

In fact, however, as in the following code snippet, processing will not stop with an infinite loop. Why is this? How does the browser (spec) avoid infinite loops?

 .row { display: flex; flex-wrap: wrap; width: 500px; background: #faf; height: 120px; } .text { background: #ffa; } img { width: 200%; }

 <div class="row post"> <a href="#" class="text"> <img src="https://placeimg.com/150/50/animals"> </a> </div>

Answer 1

In fact, however, as in the following code snippet, processing will not stop with an infinite loop. Why is this? How does the browser (spec) avoid infinite loops?

There is never an infinite loop and the rule is to not go backwards. In general, the browser will do only one iteration of the infinite loop.

Basically in your case you have used width:200% so we need a reference on the containing block ( .text ) to calculate this but we didn't define any width there so the browser will somehow ignore that width which will give us this output

 .row { display: flex; flex-wrap: wrap; width: 500px; background: #faf; height: 120px; } .text { background: #ffa; } img { /*width: 200%;*/ }

 <div class="row post"> <a href="#" class="text"> <img src="https://placeimg.com/150/50/animals"> </a> </div>

Now that we have a width for our containing block we will use it as a reference for the image to make it twice the width of .test which is also its initial width.

 .row { display: flex; flex-wrap: wrap; width: 500px; background: #faf; height: 120px; } .text { background: #ffa; } img { width: 200%; }

 <div class="row post"> <a href="#" class="text"> <img src="https://placeimg.com/150/50/animals"> </a> </div>

It's trivial now, that if you use width:100% nothing will happen since all the widths will remain the same.

---

This isn't specific to flexbox and may happen in different situation.

Here is another example with inline-block :

 .text { background: #ffa; display: inline-block; height:200px; } img { width: 200%; }

 <a href="#" class="text"> <img src="https://placeimg.com/150/50/animals"> </a>

Same logic happen here, the inline-block use the image to define its width then we move to the image and we don't get back again.

Another example without image:

 .text { background: #ffa; float:left; height:100px; } .img { width: 50%; background:red; }

 <a href="#" class="text"> <div class="img"> some text here</div> </a>

---

Here is the part of the specification explaining this: https://www.w3.org/TR/css-sizing-3/#percentage-sizing

Some relevant quotes:

..Sometimes the size of a percentage-sized box's containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency . When calculating the containing block's size, the percentage behaves as auto .

..The containing block's size is not re-resolved based on the resulting size of the box ; the contents might thus overflow or underflow the containing block..