983192 - flex-item height in Vertical flex-box biased by height: auto children

Status: RESOLVED DUPLICATE of bug 903880

(Core :: Layout, defect)

Description

[b.emig]

Attachment: 13-03-2014 16-41-06.png

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0 (Beta/Release)
Build ID: 20140212131424

Steps to reproduce:

See Demo: http://jsfiddle.net/76Vnh/5/
Set up a Flex-box (direction column/vertical) with at least 300px width. Insert multiple flex-items, containing images of variable height. the flex-items need not to shrink or grow, but stay in there respective height (flex: 0 0 auto), except of the last one. This one should take up the remaining space (flex: 1 1 200px)


Actual results:

in Firefox (27.0.1) the flex-items containing the images do shrink, even though theyre not allowed to


Expected results:

the flex-items should not shrink, but instead sty at there initial height (auto)

Comment 1

[Daniel Holbert [:dholbert]]

I don't see those flex items shrinking. If I adjust the height in the "aside {}" rule in your example, to be tall (e.g. 2000px) or small (e.g. 100px), the only item that I see changing size is the orange one. (which is what you'd expect, because it's the only flexible item)

Could your perhaps provide a screenshot showing the issue, or describe exactly which flex item that you see shrinking?

Comment 2

[Daniel Holbert [:dholbert]]

(For the record: I'm testing using Firefox ver. 27.0.1, too)

Comment 3

[Daniel Holbert [:dholbert]]

(Also, pedantic side note: if you like, you can use 'flex: none' in your styles instead of 'flex: 0 0 auto'. They produce the same behavior, but 'none' is a bit more concise & expresses the intent in a more immediately-human-readable way.)

Comment 4

[b.emig]

Hello Daniel,
and thanks for your advise. I reproduced the same behaviour with 'flex: none', although phpstorm marks this as invalid CSS.

It is correct, that only the orange flex-item shrinks and grows as intended, when changing the height of the flex-box. But the yellow and green boxes are rendered with wrong heights initially, regardless of the parents height. I adjusted the margin between the sections, so the problem is better visible (http://jsfiddle.net/76Vnh/6/). The text underneath the image in the yellow and green box is supposed to be in the box, and not outside of it, half covered by the next sibling.

Regards

Comment 5

[b.emig]

Update:
http://jsfiddle.net/76Vnh/7/

the prombem becomes even better visible, when i change the width of the aside-tag to 50%. Try to change the with on the jsFiddle Preview-Frame. The Height of the 'flex: none'-Sections seems to get stuck at aprox. 210px.

Expected behaviour is that they grow with their content. This works in other browsers like Chrome and Internet Explorer

Comment 6

[Daniel Holbert [:dholbert]]

Thanks for the screenshot. That's odd -- I don't see that behavior in Firefox 27.0.1 on Linux. I get the behavior that you're expecting to get. (There's space for the text at the bottom of the green background and the yellow background, on my system.)

Maybe it's Windows-specific, for some strange reason... I'll give Windows a shot tomorrow.

Comment 7

[Daniel Holbert [:dholbert]]

Ah, OK -- I can reproduce it with your /7/ testcase (thanks for that), in Firefox 27. Good news -- it seems to be already fixed in Nightly!

Given that it's in vertical flexboxes with percent widths on the children, I think it's a duplicate of a known bug; seeing if I can find the bug number.

Comment 8

[Daniel Holbert [:dholbert]]

Yeah, I'm pretty sure this is a duplicate of bug 903880, which is fixed on Beta.

Could you test the latest Beta from http://www.mozilla.org/en-US/firefox/beta and indicate whether that build is affected or not? (I'm betting it's not.)

Comment 9

[Daniel Holbert [:dholbert]]

(I tested Beta locally & can't reproduce there, FWIW.)

Comment 10

[b.emig]

Hello Daniel,
good news, i can confirm that the bug is fixed in V28 - so we have to find a workaround for backwards compatibility...

Meanwhile I tested under Linux (Debian Wheezy)
Mozilla/5.0 (X11; Linux x86_64; rv:27.0) Gecko/20100101 Firefox/27.0
and could reproduce it there too: http://i.imgur.com/ri3k9wy.png, so it seems not to be (habe been) a Windows-specific bug. 

thank you for your help and best regards

Comment 11

[Daniel Holbert [:dholbert]]

Thanks!