1378426 - Wrapped flex children exceed container with limited height

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[evenfrosty]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Steps to reproduce:

Here is a Pen demo: https://codepen.io/evenfrost/pen/MorNrB


Actual results:

Flex container with limited height and `flex-flow: row wrap;` cause flex children with long content to overflow its height. It doesn't happen with `flex-flow: row nowrap;`.
Workaround is to set `height: 100%;` for flex children.


Expected results:

Flex children don't overflow container's height in both cases.

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report! In this case, we're actually following the flexbox spec and behaving correctly.  We do differ from Chrome, but that's because they have an odd quirk here (from an older version of the spec).  Safari 10.1 and Edge 15 both agree with the Firefox behavior, too, by the way -- Chrome seems to be the odd one out.

Note that Chrome agrees with us if you make the flex items *actually wrap* to two lines, too:
  https://codepen.io/anon/pen/BZPyaG
They only disagree with other browsers for the special case of a multi-line flex container where the items don't have to wrap (as in your original codepen)

(In reply to evenfrosty from comment #0)
> Flex container with limited height and `flex-flow: row wrap;` cause flex
> children with long content to overflow its height.

If the flex item has "auto" height, then it will shrinkwrap its children, yes.

> It doesn't happen with
> `flex-flow: row nowrap;`.

This is due to a special-case for single-line flex containers:
  # If a single-line flex container has a definite cross size,
  # the outer cross size of any stretched flex items is the
  # flex container’s inner cross size [...]
https://drafts.csswg.org/css-flexbox-1/#definite-sizes

Note that:
 * all flex items are "stretched" by default, unless you set align-items/align-self to something else
 * The term "single-line" is defined based on "wrap" vs. "nowrap" -- not on the actual number of lines:
     https://drafts.csswg.org/css-flexbox-1/#flex-lines 
So this special case does NOT apply to "flex-flow: row wrap" containers. (That's why you see a difference in behavior there.)

> Workaround is to set `height: 100%;` for flex children.

Sure -- that'll work around this, because then the flex items will explicitly size to the container's height rather than to shrinkwrap their children.

Comment 2

[Daniel Holbert [:dholbert]]

> Note that:
>  * all flex items are "stretched" by default,

Sorry, I should've said: << all *auto-height* flex items are "stretched" by default >>

(The flexbox cross-axis "stretch" behavior -- including the squashing you're wanting here -- are specific to auto-height children.)

Comment 3

[Daniel Holbert [:dholbert]]

This spec change was proposed here, BTW:
  https://lists.w3.org/Archives/Public/www-style/2014Oct/0489.html
and we implemented it in bug 1090031 after the change made it into the spec.

It seems that maybe Chrome never implemented it, though.  Their bug for this is:
 https://bugs.chromium.org/p/chromium/issues/detail?id=599828

Comment 4

[evenfrosty]

Thank you for such comprehensive answer and sorry for bothering with invalid case. Now I see that Chrome is a bad boy here hehe. :)