1048933 - Flexbox doesn't take intrinsically sized elements into account

Status: RESOLVED DUPLICATE of bug 958714

(Core :: Layout, defect)

Description

[leon]

Attachment: Actual result

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

Steps to reproduce:

An element with height: 0 and padding-bottom: 56.25% is used to make a container based on a given aspect ratio. See this pen: http://codepen.io/leonderijke/pen/kGgmi

Its parent is made a vertical flex container.


Actual results:

The element isn't accounted for when laying out the flex-items.


Expected results:

The element should have gained its calculated height from the padding-bottom (box-sizing is set to border-box) and the element should be accounted for when laying out the flex-items.

Comment 1

[leon]

Attachment: Expected result

Comment 2

[leon]

A workaround for this issue is to wrap the element with another element, as in this pen: http://codepen.io/leonderijke/pen/GByDa

I wrote up a blog post with more background information about the chosen HTML structure: http://codepen.io/leonderijke/blog/flexbox-and-intrinsic-sizing-some-browser-inconsistencies

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to leon from comment #0)
> An element with height: 0 and padding-bottom: 56.25% is used to make a
> container based on a given aspect ratio. See this pen:
[...]
> Its parent is made a vertical flex container.

Additionally, its parent does not have a definite height (i.e. its height depends on its children), which means percent values for vertical-padding on children are supposed to resolve for 0.

> Expected results:
> 
> The element should have gained its calculated height from the padding-bottom

The padding-bottom resolves to 0, as noted above.

This is a duplicate of bug 958714. Note that Chrome gets this wrong ( http://code.google.com/p/chromium/issues/detail?id=333533 ), so if you're using Chrome for your expected results here, it's giving you the wrong result.

Comment 5

[Daniel Holbert [:dholbert]]

Note that this behavior is different from how blocks behave, which makes it a common stumbling-block.

Quoting the spec:
 # Percentage margins and paddings on flex items are always resolved
 # against their respective dimensions; unlike blocks, they do not
 # always resolve against the inline dimension of their containing block.
http://dev.w3.org/csswg/css-flexbox/#item-margins

(In other words: for something in a block, this percentage would resolve against the width and do what you expect; but since this is a flex item, it resolves against the containing block's height. And since there's no specified height on the containing block, it resolves to 0.)

Comment 6

[leon]

Thanks Daniel! To me, Firefox's behavior makes sense now.