Skip to content
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

[css-flexbox] Should fully inflexible item have definite height even with min-height: auto? #4305

Closed
cbiesinger opened this issue Sep 13, 2019 · 6 comments
Closed

[css-flexbox] Should fully inflexible item have definite height even with min-height: auto? #4305

cbiesinger opened this issue Sep 13, 2019 · 6 comments
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-flexbox-1 Current Work

Comments

@cbiesinger
Copy link

https://drafts.csswg.org/css-flexbox/#definite-sizes says:

Note: The main size of a fully inflexible item with a definite flex basis is, by definition, definite.

However, with min-height: auto, such an item may well require layout to determine its size (in a column flexbox where the item has height: auto; flex: 0 0 100px;). Should its size still be considered definite?

cc @dholbert @fantasai @tabatkins
@astearns astearns added the css-flexbox-1 Current Work label Sep 13, 2019
@fantasai
Copy link
Collaborator

Yes, because of https://www.w3.org/TR/css-flexbox-1/#min-size-auto

Nonetheless, although this may require an additional layout pass to re-resolve percentages in some cases, this value (like the min-content, max-content, and fit-content values defined in [CSS-SIZING-3]) does not prevent the resolution of percentage sizes within the item.

Although maybe “by definition” isn't quite correct phrasing for the note anymore...

@tabatkins
Copy link
Member

Test case demonstrating the behavior: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/9405

<!DOCTYPE html>
<div style="display: flex; flex-flow: column; border: thick dotted; height: 150px;">
  <span style="border: thick solid; flex: 0 0 1em;">
   <div style="float: right; height: 50%; background: orange;">foo</div>
   foo<br>foo<br>foo<br>foo<br>foo<br>foo
  </span>
</div>

The % on the float does resolve against the height of the flex item, despite that height being boosted by the min-height:auto specifically.

@fantasai
Copy link
Collaborator

@cbiesinger Does this answer your question, or do you think we need to dig into this more?

@fantasai fantasai added Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. Commenter Response Pending labels Jun 10, 2021
@davidsgrogan
Copy link
Member

davidsgrogan commented Jun 10, 2021 •
edited
Loading

Not cbiesinger, but still confused :)

  1. Blink has a bug where it doesn't respect the normative text fantasai quoted above in a case similar to Tab's, where the flexbox's height is auto instead of 150px. Blink makes the orange float's % height behave as auto, but the normative text says the % must be resolved. Firefox does the right thing. (I'm not making a point here just FYI if anyone runs into this bug while looking into this issue.)

  2. I don't see where the behavior described in the Note above is implied by normative text. In the case below, the row flexbox qualifies for the Note, which claims the row flexbox's height is definite. But where does that definiteness come from? The definiteness matters apart from resolving percentages because it decides if the inner flexbox's children qualify for 9.8.1.

<!DOCTYPE html>
<div style="display: flex; flex-flow: column; border: thick dotted;">
  <div style="display: flex; flex: 0 0 10px; border: 2px dotted blue;" id=should-my-children-stretch-to-my-definite-height>
    <...some flex items...>
  </div>
</div>

@davidsgrogan davidsgrogan mentioned this issue Jul 24, 2021
Closed
@tabatkins
Copy link
Member

Closing since #4311 was closed, and is a dupe of this issue.

@cbiesinger
Copy link
Author

Not technically a dupe but that resolution does resolve this one, thanks

@fantasai fantasai added Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Commenter Response Pending labels Aug 12, 2021
pull bot pushed a commit to Mu-L/chromium that referenced this issue Oct 8, 2021
@davidsgrogan
[css-flex] Treat post-flex sizes as definite if flex-basis was definite
38061e3 
Another flex-specific definiteness exception was recently added[1]. Now
the item's child's %height can resolve in this case.

<div style="display: flex; flex-direction: column;">
  <div style="flex: 1 1 100px;">
    <div style="height: 100%"></div>
  </div>
</div>

The %height used to not be allowed to resolve because the item's
min-height:auto required a layout to determine the height of the item.
Normally if you need a layout to find a size, you consider the size to
be indefinite. But we're making an exception for layouts done just for
min-height:auto when the item has a definite flex-basis.

This CL makes more cases definite. A follow-up CL will change other
cases from definite to indefinite. See https://crbug.com/1255340

[1] w3c/csswg-drafts#4305

Fixed: 961902
Change-Id: I3fadb99a3cba7174a87e5e9a165526d2c5a369d8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3200406
Commit-Queue: David Grogan <dgrogan@chromium.org>
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/main@{#929607}
mjfroman pushed a commit to mjfroman/moz-libwebrtc-third-party that referenced this issue Oct 14, 2022
@davidsgrogan @copybara-github
[css-flex] Treat post-flex sizes as definite if flex-basis was definite
240b95a 
Another flex-specific definiteness exception was recently added[1]. Now
the item's child's %height can resolve in this case.

<div style="display: flex; flex-direction: column;">
  <div style="flex: 1 1 100px;">
    <div style="height: 100%"></div>
  </div>
</div>

The %height used to not be allowed to resolve because the item's
min-height:auto required a layout to determine the height of the item.
Normally if you need a layout to find a size, you consider the size to
be indefinite. But we're making an exception for layouts done just for
min-height:auto when the item has a definite flex-basis.

This CL makes more cases definite. A follow-up CL will change other
cases from definite to indefinite. See https://crbug.com/1255340

[1] w3c/csswg-drafts#4305

Fixed: 961902
Change-Id: I3fadb99a3cba7174a87e5e9a165526d2c5a369d8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3200406
Commit-Queue: David Grogan <dgrogan@chromium.org>
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/main@{#929607}
NOKEYCHECK=True
GitOrigin-RevId: 38061e3cf018dc77d8798516ec389aabf636b882
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-flexbox-1 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@tabatkins @fantasai @astearns @cbiesinger @davidsgrogan