[css-flexbox-1] Inconsistent sizing of replaced elements in flex containers #12012
Description
Context:
Consider the following flex layout:
<!DOCTYPE html>
<div style="display: flex; max-width: 500px; font-family: Arial;">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, vitae? Recusandae porro eveniet sapiente placeat magnam enim fugit provident, numquam vero ducimus minus iusto ullam aliquam...
</div>
<img src="box.jpg" alt="box" style="width: 0; min-width: 50%" />
</div>In this case, flex-basis is initially auto, which causes it to use the width property. Since width: 0 is specified, that becomes the initial flex base size. However, due to min-width: 50%, this base size is adjusted up to the hypothetical main size of 250px. Once the flex item’s main size is resolved, the cross size is determined by laying out the item as if it were an in-flow block-level box. Finally, the cross size is stretched to match the flex line’s used cross size, as expected.
Both Chrome and Firefox render the image at 250px wide. The image's natural size is 200x200.
Now consider this modified version:
<!DOCTYPE html>
<div style="display: flex; max-width: 500px; font-family: Arial;">
<div>
Lorem ipsum...
</div>
<img src="box.jpg" alt="box" style="width: 50%" />
</div>Here, width: 50% is specified directly on the image element. Despite the flex container appearing to have a definite size (considering both the document flow and the constraints imposed by the initial containing block through its ancestors) Chrome seems to disregard the percentage width when computing the flex-basis, resulting in the image falling back to its natural width of 200px. Firefox behaves differently (though the exact behavior is unclear), but in both browsers, the height is stretched as expected. Interestingly, even when setting the container’s width: 500px explicitly (instead of max-width), the outcome remains unchanged, suggesting that the container’s definite inline size state does not play a role in resolving the image’s percentage-based flex base size.
Chrome:
Firefox:
Adding height: 100% changes things again:
<!DOCTYPE html>
<div style="display: flex; max-width: 500px; font-family: Arial;">
<div>
Lorem ipsum...
</div>
<img src="box.jpg" alt="box" style="width: 50%; height: 100%;" />
</div>This time, neither browser stretches the image to match the full cross size of the flex line. The width behaves similarly to the previous example, but the height stretching now fails.
Chrome:
Firefox:
Compare with an equivalent Grid layout:
<!DOCTYPE html>
<div style="display: grid; grid-template-columns: minmax(0px,1fr) minmax(0px,1fr); max-width: 500px; font-family: Arial;">
<div>
Lorem ipsum...
</div>
<img src="box.jpg" alt="box" style="width: 100%; height: 100%;" />
</div> Here, both Chrome and Firefox respect width: 100% and height: 100%, and the image is sized correctly to fill its grid area.
Questions:
What parts of the CSS Flexbox specification could explain these discrepancies in sizing behavior, particularly regarding:
-
Why
width: 50%is ignored, even when the container appears to have a definite size? -
If the inline size of the container is not considered definite, could you clarify when the flex container's main size becomes definite in this scenario, and how percentage values like
width: 50%are handled in this context? -
Why does the image not stretch when
height:100%? -
Why Grid layout appears to handle these same percentage-based dimensions more predictably than Flexbox?