1380603 - nested flexbox css is not working properly

Status: RESOLVED INVALID

(Core :: Layout, defect, P3)

Description

[Imamudin Naseem]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

Steps to reproduce:

flex-child(A) of a node (which is also a flex-child) does not scroll if we add css "overflow: hidden" on A.

This link (https://output.jsbin.com/qalumegeje) show to demo.

Try to open it in chrome, safari. You will only the item contrainer scrolls.

While when you open in Firefox, entire body scrolls, which is weird.


Actual results:

nested flex-child did not scroll with overflow: auto


Expected results:

nested flex-child should scroll with overflow: auto

Comment 1

[Daniel Holbert [:dholbert]]

We're following the spec here -- Chrome/Safari are not.  This is a version of https://bugs.chromium.org/p/chromium/issues/detail?id=487302 on the Chrome/Safari end.

To get the behavior you want, you need to set "min-height:0" on the .content element, or else it will refuse to be any smaller than its min-content height.  (This is a quirk of how flexbox works - each flex item has an "implied minimum size" which comes from its content.)  Here's a modified jsfiddle, with that tweak - Firefox renders this how you expect:
 https://jsbin.com/xaxefujaka/2/edit?html,css,output

I tested Microsoft Edge 15 on the original testcase and on this modified testcase, too, and they match Firefox.

Comment 2

[Imamudin Naseem]

Thanks