Skip to content

[css-grid-1] Intrinsic contributions across spanning items and fractional flex items #5375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
fantasai opened this issue Jul 31, 2020 · 1 comment
Closed

[css-grid-1] Intrinsic contributions across spanning items and fractional flex items #5375

fantasai opened this issue Jul 31, 2020 · 1 comment
Labels
Closed Rejected as Invalid Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-grid-1 Needs Testcase (WPT)

Comments

@fantasai
Copy link
Collaborator

Was writing tests for #4783 and noticed both Chrome and Firefox failing the 0fr auto variant of the tests. So I poked around and found that when spanning a track with an fr value >= 1, none of the item's contribution gets incorporated into an inflexible intrinsic track, but if the fr value is < 1, then the excluded proportion of the item's contribution does in fact get incorporated into the intrinsic track.

See testcase (simplified code below)

Do we want to spec this behavior? Or update implementations to exclude the spanned item’s contribution completely from intrinsic tracks, even when fr < 1?

<!DOCTYPE html>
<style>
  .container {
    display: grid;
    border: solid silver;
    font: 12px/1 Ahem;
  }
  .test { grid-column: 1 / -1; }

  /* Make columns visible */
  span { border-bottom: solid orange; }
  span + span { border-color: teal; }
</style>

<div class="container" style="grid-template-columns: 0fr auto">
  <div class="test">AAA</div>
  <span></span><span></span>
</div>

<div class="container" style="grid-template-columns: 0.5fr auto">
  <div class="test">AAA</div>
  <span></span><span></span>
</div>

<div class="container" style="grid-template-columns: 1fr auto">
  <div class="test">AAA</div>
  <span></span><span></span>
</div>
@Loirooriol
Copy link
Contributor

Seems to me that this behavior is already specified. For example, for grid-template-columns: 0.5fr auto; float: left, this is what implementations do:

  • The track sizing algorithm ignores the contribution of the item with span > 1 and flex tracks. So we reach https://drafts.csswg.org/css-grid/#algo-flex-tracks with a base size and growth limit of 0.
  • We are sizing the grid container under a max-content constraint, so the free space is indefinite, and the used flex fraction is the maximum of:
    • The base size, 0, since the flex fraction <= 1
    • The result of finding the size of an fr using both tracks and a space to fill of 36px (the max-content contribution). This is 36px.
  • So the base size of the flex track is set to 0.5*36px = 18px.
  • Then the content size of the grid container is set to 18px + 0px = 18px, and we lay it out again "for real".
  • Again, the track sizing algorithm ignores the contribution of the item with span > 1 and flex tracks. So we reach https://drafts.csswg.org/css-grid/#algo-flex-tracks with a base size and growth limit of 0.
  • This time the free space is a definite length (18px), so the used flex fraction is the result of finding the size of an fr using both tracks and a space to fill of 18px. This is 18px.
  • So the base size of the flex track is set to 0.5*18px = 9px.
  • So we have a remaining free space of 18px - 9px = 9px, and the auto track is stretched to cover that.

It's simpler for grid-template-columns: 0.5fr auto; width: 3em:

  • The track sizing algorithm ignores the contribution of the item with span > 1 and flex tracks. So we reach https://drafts.csswg.org/css-grid/#algo-flex-tracks with a base size and growth limit of 0.
  • The free space is a definite length (36px), so the used flex fraction is the result of finding the size of an fr using both tracks and a space to fill of 36px. This is 36px.
  • So the base size of the flex track is set to 0.5*36px = 18px.
  • So we have a remaining free space of 36px - 18px = 18px, and the auto track is stretched to cover that.

But, the thing is that according to https://drafts.csswg.org/css-grid/#track-size-intrinsic-min

If the grid container is being sized under a min- or max-content constraint, use the items’ limited min-content contributions in place of their minimum contributions here.

So actually, when sixing under a max-content constraint, the base size and growth limit of the flex track should be 36px. So the content size of the grid container should also become 36px, and then the result should look like the width: 3em case.

@fantasai fantasai added the Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. label Jul 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Rejected as Invalid Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-grid-1 Needs Testcase (WPT)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fantasai @Loirooriol