Skip to content
This repository has been archived by the owner on Jan 19, 2024. It is now read-only.

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

Closed
SelenIT opened this issue Dec 1, 2017 · 2 comments

Comments

@SelenIT
Copy link

SelenIT commented Dec 1, 2017

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).

@philipwalton
Copy link
Owner

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
Copy link
Owner

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants