min-content defaults for replaced items and overflow containers from Elliott Sprehn on 2013-04-22 (www-style@w3.org from April 2013) (original) (raw)

Recently the spec for flexbox was changed so that the min-width of flex items was no longer min-content (mutatis mutandis for height), but this produces some bad behavior when using replaced things like or as flex items. Previously they had an implicit min-width: min-content which would prevent them from becoming smaller, but now they'll end up being crushed.

ex.

some long text that should wrap here

In this example the can end up being considerably less than 200px wide which isn't what the author intended.

Before this change was made to the spec the min-width was min-content which worked fine for this but had other bad behavior like making overflow: scroll on a flex item behave unexpectedly since the item would expand out to the min-content size.

ex.

... thousand 100px tall items ...

The overflow: scroll

would end up being as tall as it's min-content size which is the height of all the items and you wouldn't get a scrollbar. Instead you needed to use min-height: 0 on the

to get your scrollbar to work.

Both of these have proven to be surprising behavior, instead I think we should combine the behavior so the min-width is min-content unless your overflow property computes to a value other than visible in which case it should be 0.

This special cased behavior gives a sensible result for and overflow: scroll as flex items.