- From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
- Date: Fri, 16 Jul 2021 00:13:18 +0000
- To: public-css-archive@w3.org
I guess I was being confused by the interaction of flex and grid. Let's follow the specs step by step.
```html
<div class="wrapper" style="display: inline-flex; flex-flow: column; min-height: 50px;">
<div style="flex-grow: 1; display: grid; background: red">
<div style="font: 20px/1 Ahem; background: green">content</div>
</div>
</div>
```
- In https://drafts.csswg.org/css-flexbox-1/#algo-main-item, we are in case C, so we size the flex item / grid container under a max-content constraint:
- The `auto` min track sizing function sets the base size to the limited max-content contribution, which is the max-content contribution, which is 20px.
- The `auto` (treated as `max-content`) max track sizing function sets the growth limit to the max-content contribution, 20px.
- The base size and growth limit are both 20px, so the track is not maximized.
- The `auto` max track sizing function doesn't stretch the row since free space is indefinite and the grid container has no definite `min-height`.
- The final height of the row is the base size, 20px. And that's also the height of the grid.
- So the flex base size is 20px. And the hypothetical main size is also 20px.
- Then in https://drafts.csswg.org/css-flexbox-1/#algo-main-container we find the height of the flex container. That's the maximum of the 50px min-height and the max-content main size, defined in https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes
- We subtract the flex base size (20px) from the max-content contribution (basically the max-content size, 20px). That's the max-content flex fraction, 0px.
- Then the flex container’s max-content main size is `20px + 1*0px = 20px`
- So the height of the flex container is 50px.
- We collect the flex item into a single flex line, and then [resolve flexible lengths](https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths)
- The used flex factor is the flex grow factor (1), since the hypothetical main size of the flex item (20px) is smaller than the main size of the flex container are equal (50px).
- The target main size is initialized to the flex base size, 20px.
- The initial free space is the flex container’s main size minus the flex base size, `50px - 20px = 30px`.
- The remaining free space is the initial free space, 30px.
- We distribute the 30px into the flex item by setting the target main size to the flex base size plus the whole remaining free space: `20px + 30px = 50px`
- There is no min/max violation, the sum of the adjustments is 0px, so we freeze the flex item, and exit the loop.
- The used height of the flex item is the target main size, 50px.
- Then we find the cross size, not much relevant
- Now that we know the final size of the flex item / grid container, we lay out the grid again, "for real":
- The `auto` min track sizing function sets the base size to the minimum contribution, which is the min-content contribution, 20px.
- The `auto` (treated as `max-content`) max track sizing function sets the growth limit to the max-content contribution, 20px.
- The base size and growth limit are both 20px, so the track is not maximized.
- The `auto` max track sizing function stretches the row by distributing the `50px - 20px = 30px` of free space. The base size becomes 50px.
- The final height of the row is the base size, 50px.
- The grid item is stretched into that size, so it becomes 50px tall.
So I guess Firefox is already behaving according to the specs, and it's a Chrome bug, and there is no need to edit the specs.
--
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4852#issuecomment-881087521 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 16 July 2021 00:13:20 UTC