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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4