1022240 - "height: 100%" inside a flexible item with "flex-basis: auto" behaves in a undeterminist way

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Julien Wajsberg [:julienw]]

Attachment: FAIL: the flexible element uses flex: none

STR:

* Load one of the failing attachments in Firefox
* press "Ctrl-Shift-M" to toggle The responsive mode
* reduces the viewport's height to hide the item at the bottom
* then increases it to the initial height

=> the bottom's height is not determinist; it does not get back its initial height.

As I understand it, the issue happens when the flexible element uses "flex-basis: auto".


Chrome seems to interpret the inner element (.inner-item) height as 'auto' (like CSS specifies for a height specified as percentage when its container has no explicit height, see [1]). So I think we should do the same too.

[1] http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Comment 1

[Julien Wajsberg [:julienw]]

Attachment: FAIL: the flexible element uses default flex values

Comment 2

[Julien Wajsberg [:julienw]]

Attachment: WORKS: no nested element

Comment 3

[Julien Wajsberg [:julienw]]

Attachment: WORKS: uses display: flex in the flexible item

This is the good solution to the problem I had.

Comment 4

[Julien Wajsberg [:julienw]]

BTW it would be a good idea to output a warning when "height: <x>%" is interpreted as "auto".

Note the same issue happens when using max-height with percentages too (which is obvious, but it's better to say it :) ).

Comment 5

[Daniel Holbert [:dholbert]]

I can reproduce in Nightly, by resizing the window (or responsive-mode-viewport) vertically. It looks like we're insufficiently reflowing on a vertical-resize, or something.

If I resize the window horizontally, the original layout is restored.

32.0a1 (2014-06-06)
Mozilla/5.0 (X11; Linux x86_64; rv:32.0) Gecko/20100101 Firefox/32.0

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: testcase 5

Here's a slightly-reduced testcase, w/ instructions included in it. (After shrinking & then growing the window's height, the reddish region ends up smaller than it started out.)

Comment 7

[Karl Dubost💡 :karlcow]

This is working as expected now.