1111286 - Flex no longer (> ff 33.1) respected by child SVG element height

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[Rick]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 Safari/537.36

Steps to reproduce:

Please see this JSFiddle (http://jsfiddle.net/rv8n7juL/25/ ) reduced test case.

In the reduced test case, three red colored divs have been given child elements with heights of 200px, one a span, one a div and the last one is an SVG element.  


Actual results:

In Firefox 33.1 the flex rendering overrules the child element heights - creating three red divs of equal height.  This is the expected behavior. 

In Firefox >= 34.0 the SVG element does not respect flex rendering - causing the last element (which has an svg child element) to destroy the flex rendering layout.  This unexpected result exists in my testing up to FF = 35.Ob3. The test case rendered as expected in FF = 33.1 and I have not gone further backwards to test.





Expected results:

Expectation is that all three red colored divs should be rendered equal in height.  

Flex rendering should override their child elements; and SVG elements should have the same effect on their parents as div and span elements. 

Other browsers:
Chrome renders this as expected as of version 38.0 
Safari does not render this as expected.
I do not know about Explorer.

Comment 1

[Boris Zbarsky [:bzbarsky]]

> This is the expected behavior. 

Not per spec.  It's the expected behavior in old spec drafts, but in the current spec, the default min-height value on flex items is "auto", which defaults to the intrinsic height.

Firefox 34 has been updated to follow the current spec here.  Chrome hasn't been updated yet.

You can explicitly style your flex items with "min-height: 0" to override the default value and get the old behavior.

Comment 2

[Daniel Holbert [:dholbert]]

Note: your jsfiddle has <span height="200px"> and <div height="200px"> -- I don't think the "height" attribute actually has any effect on those elements.  It *does* have an effect on the <svg> element, though -- setting its intrinsic height -- which is why it establishes its min-width via "min-width:auto".

Anyway, you just want to set "min-height:0" on your <svg> element, to allow the flex container to shrink it, per the current flexbox spec.

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #2)
> It *does* have an effect on the <svg> element, though -- setting
> its intrinsic height -- which is why it establishes its min-width via
> "min-width:auto".

(Sorry, I meant "min-height", not "min-width", of course.)

Comment 4

[Daniel Holbert [:dholbert]]

Relevant spec section, for reference: http://dev.w3.org/csswg/css-flexbox/#min-size-auto

Comment 5

[Rick]

Thank you for the excellent feedback!