[css-flexbox] min-width/height: min-content defaults for replaced items and overflow containers

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 <button> or
<img> 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.

<div style="display: flex;">
  <img width="200" height="200">
  <p>some long text that should wrap here</p>
</div>

In this example the <img> 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.

<div style="display: flex; height: 100%;">
  <div style="overflow: scroll;">
     ... thousand 100px tall items ...
  </div>
</div>

The overflow: scroll <div> 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 <div> 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 <img> and overflow:
scroll as flex items.

- E

Received on Monday, 22 April 2013 23:52:06 UTC