- From: gitspeaks via GitHub <sysbot+gh@w3.org>
- Date: Thu, 27 Mar 2025 10:44:29 +0000
- To: public-css-archive@w3.org
gitspeaks has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-flexbox-1] Inconsistent sizing of replaced elements in flex containers ==
Context:
Consider the following flex layout:
```html
<!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:
```html
<!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:
```html
<!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:
```html
<!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?
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12012 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 27 March 2025 10:44:30 UTC