1501673 - Flex column doesn't work with overflow

Status: RESOLVED INVALID

(Core :: Layout: Flexbox, defect)

Description

[Zéfling]

Attachment: Test.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:56.0; Waterfox) Gecko/20100101 Firefox/56.2.3

Steps to reproduce:

This combination doesn't work in the attached test case :

display: flex;
height: 100%;
overflow: hidden;
flex-direction: column;


Actual results:

With flex column in a 100% height context not works with overflow:hidden. The size and the position off the content are superior at 100%. 


Expected results:

It works with firefox 63.

Comment 1

[Zéfling]

Sorry, the test not work also with Firefox 63. It's ok with Chrome.

Comment 2

[Paul_B]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
Build ID: 20181018182531

Hi reporter,

Thank you for taking the time to report this.
I've tested the attached test case with the latest 63 Firefox release build and 65.0a1 Nightly build (20181029100347) on Windows 10, Windows 7, Ubuntu 18.04 and Mac OSX and I can confirm that if the display is set to Flex or if the flex-direction is set to column, the header is not visible. I'm not really sure if the height percentage has any influence in this case, but I'll add this to Devtools:Inspector component for a more advised input. 
If this is not the appropriate component, please feel free to change it.

Comment 3

[Martin Balfanz [:mbalfanz]]

I think this bug is not Devtools related, but belongs to Core::Layout - Flexbox

Also, note that Chrome Canary renders the same as Firefox. I guess it's caused by `justify-content: center;` applied to the body element.

Comment 4

[Zéfling]

With 

.body {
    justify-content: start;
}

the header height size is 19px

With 

.body > .main {
    overflow: auto or hidden;
}

the header height size is 150px (the good size)

What the good way is it?

Comment 5

[Daniel Holbert [:dholbert]]

Yeah, Firefox Nightly agrees with Chrome (their "Dev" version at least) and Edge.  The Chrome behavior recently changed (to match Firefox) in https://bugs.chromium.org/p/chromium/issues/detail?id=596743 .

If you want the old Chrome (i.e. current release version of Chrome) rendering on this testcase, you probably want to add "min-height:0" to your #main element -- no other changes are needed, probably.

Comment 6

[Daniel Holbert [:dholbert]]

Following up on your question in comment 4: the "overflow" workaround you mentioned in comment 4 is just a heavyweight version of the lighter-weight "min-height:0" solution discussed in comment 5.

If you don't actually need the element to have clipping/scrolling features, then min-height:0 is a simpler & more direct solution.

But comparing that vs. "justify-content:start" (or just leaving justify-content completely unspecified): -- both appraches should look the same here -- but to get "the good size" on the header with the justify-content approach, you would *also* need to add "flex: none" to the header to prevent it from shrinking.  (Otherwise the greedy tall .main element steals all of the available space and more, and forces the header to shrink down to its content size.)

The difference between the two approaches is just around the sizing of ".main".
 - If you want .main to be exactly as large as the available space in your viewport (minus the .header), then you should give it "min-height:0", to allow it to shrink to be that small (despite the fact that it's got tons of content that won't fit inside of it).

 - If you want .main to be as large as its content (huge) and for its bottom edge to be offscreen, then the justify-content approach is what you'd want.

You can see the difference between these approaches if you add a border to .main.  (Without that, they look pretty much the same and it's a judgement call which one you prefer.)

Comment 7

[Daniel Holbert [:dholbert]]

So, just to be clear, your (roughly equivalent) options are:
 (1) add min-height:0 to .main

or:
 (2) remove your "justify-content:center" styling, and add "flex:none" to the header.

Either of those should give you the behavior you're looking for, in all browsers, I think.