You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Jan 19, 2024. It is now read-only.
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:
the flex container has a certain height (explicitly set or calculated, e.g. as a flex item of the parent flex container), flex-direction: column, and overflow: auto (or scroll);
the flex item itself is a nested flex container (it has display: flex);
the flex item has flex-shrink: 1, flex-basis: auto, and min-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 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).
The text was updated successfully, but these errors were encountered:
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.
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).
The text was updated successfully, but these errors were encountered: