philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 495 forks source link

Flexbug #1 special case: auto minimum height of the nested flex container in the column flex container with scrolling #241

Closed SelenIT closed 6 years ago

SelenIT commented 6 years ago

While in general the Flexbug #1 has been fixed, there seems to be a special case where the content sizing of the flex item is still ignored when flex-shrinking the flex items. It's the situation where:

Expected behavior: according to the spec, flex-shrink: 1 should not shrink the item's height below its automatic minimum size, and the container should get overflowed and enable scrolling. So it works in Firefox and Edge.

Bug: Chrome and Safari shrink the height nested flex container to the height of the outer container, so that nested container itself gets overflowed (as if it had min-height: 0, or itself had overflow not visible, in which case min-height: auto is treated as 0). Scrolling on the parent still occurs, but the rest of the contents of the inner container is displayed outside it.

The workaround is the same as for Flexbug #1 — disable shrinking (flex-shrink: 0). Alternatively, setting min-height: min-content also works in Chrome (haven't tested in Safari yet, although it should work there, too, according to canIUse).

The interactive demo showing both bug and both workarounds (applyed by checking the corresponding option): JSbin (originally was JSfiddle).

The issue #191 may be a duplicate of this (they seem to share the same cause).

philipwalton commented 6 years ago

Thanks, I added this to the Chrome bug cross linked from the other issue (assuming they're the same issue). You can star the issue as well if you want (number of stars helps us with prioritization).

As for a workaround, since this is still essentially just Flexbug 1, I'm hesitant to do anything more, but perhaps we could clarify in the README that there are still unfixed bugs related to this.

philipwalton commented 6 years ago

That bug has been merged into this one: https://bugs.chromium.org/p/chromium/issues/detail?id=596743