Skip to content

[css-grid][css-flex] Indefiniteness when sizing grid tracks in a flexible flex item #4852

Closed
@Loirooriol

Description

@Loirooriol

Consider this testcase:

.wrapper {
  display: inline-flex;
  flex-flow: column;
}
.height {
  height: 50px;
}
.min-height {
  min-height: 50px;
}
.grid {
  flex-grow: 1;
  display: grid;
  background: red;
}
.content {
  background: green; 
}
<div class="wrapper height">
  <div class="grid">
    <div class="content">content</div>
  </div>
</div>
<div class="wrapper min-height">
  <div class="grid">
    <div class="content">content</div>
  </div>
</div>
Firefox Chromium
firefox chromium

In the min-height case, the flex container is forced to be at least 50px tall, and then the grid container is also 50px tall due to flex-grow: 1.

But then, how tall should the grid row be? https://drafts.csswg.org/css-grid/#algo-stretch says

This step expands tracks that have an auto max track sizing function by dividing any remaining positive, definite free space equally amongst them. If the free space is indefinite, but the grid container has a definite min-width/height, use that size to calculate the free space for this step instead.

It seems to me that the free space is indefinite, since the flex container has min-height: 200px instead of height: 200px, so https://drafts.csswg.org/css-flexbox-1/#definite-sizes doesn't apply

If the flex container has a definite main size, a flex item’s post-flexing main size is treated as definite

And the grid container doesn't have a definite min-height. So the track shouldn't be stretched, and Chromium is right.

Something similar happens for block and flex layout. Testcase

Firefox Chromium
firefox chromium

However, from https://crbug.com/1055258, some people expect the track to be stretched like in Firefox (and old Edge). So maybe the spec should be tweaked? Or should Firefox just fix their implementation?

Note this is not just for grid-template-rows: auto, the behavior is the same for grid-template-rows: 1fr. But with grid-template-rows: 100%, Chromium stretches the row just like Firefox.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions