Closed Bug 1022240 Opened 8 years ago Closed 7 months ago

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

Categories

(Core :: Layout, defect)

x86_64
Linux
defect
Not set
normal

Tracking

()

RESOLVED FIXED

People

(Reporter: julienw, Unassigned, NeedInfo)

Details

(Keywords: testcase)

Attachments

(5 files)

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
This is the good solution to the problem I had.
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 :) ).
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
Component: CSS Parsing and Computation → Layout
Keywords: testcase
Version: unspecified → Trunk
Attached file 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.)
Flags: needinfo?(dholbert)

This is working as expected now.

Status: NEW → RESOLVED
Closed: 7 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.