search

philipwalton / flexbugs

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

nested flex boxes, when the outer one has a constrained size, result in overlaps instead of scrolling #191

Closed v-python closed 6 years ago

v-python commented 7 years ago

Chromium issue 676985 seems to me to be different than any described here. While reported on current Chrome, a friend tested with Canary also, and it is still there. Affects Opera and Chrome. Edge and Firefox do OK. IE is weird, doesn't really support flex very well. No clue about Safari or mobile browsers.

SelenIT commented 6 years ago

It seems that it's kind of special case of the Flexbug #1 which seems to not have been completely fixed. It appears that the default min-height: auto for flex items of the column-oriented flex containers works incorrectly, as 0, causing the default flex-shrink:1 shrink the element below its content size. Setting either min-height: min-content or (better) flex-shrink: 0 fixes the issue (so the default flex-basis: auto, unlike min-height: auto , works properly).

Here is a demo of another problem probably caused by the same root: https://jsfiddle.net/9xzhb6m4/2/