Closed SelenIT closed 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.
That bug has been merged into this one: https://bugs.chromium.org/p/chromium/issues/detail?id=596743
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-shrink
ing the flex items. It's the situation where:flex-direction: column
, andoverflow: auto
(orscroll
);display: flex
);flex-shrink: 1
,flex-basis: auto
, andmin-height: auto
(default values of these properties).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 hadoverflow
notvisible
, in which casemin-height: auto
is treated as0
). 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, settingmin-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).