1247212 - Nested Flexbox elements not shrinking

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[tiago.f.a.correia]

Attachment: NOT_WORKING_flex_box_resizing_four_nests.html

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0
Build ID: 20160205155049

Steps to reproduce:

1. Have a fixed width div inside 4 nested flexboxes.
2. The flexboxes have alternating layout orientations: vertical -> horizontal -> vertical -> horizontal
3. Shrink the window's width


Actual results:

The two inner flexboxes don't shrink accordingly.
I have made a small HTML page to show the problem. See attached: NOT_WORKING_flex_box_resizing_four_nests


Expected results:

The two inner flexboxes should shrink accordingly

Comment 1

[tiago.f.a.correia]

Attachment: WORKING_flex_box_resizing_two_nests.html

Comment 2

[tiago.f.a.correia]

If the fixed width div is contained within only two nested flexboxes, then it works fine (see WORKING_flex_box_resizing_two_nests.html)

In addition:
* Chrome also suffers from the same issue.
* IE works as expected.

Comment 3

[Daniel Holbert [:dholbert]]

I believe this is things working as expected. Your "NOT_WORKING" testcase should work (in Chrome and Firefox) if you add "min-width: 0" to the horizontal flex items (each element whose parent is a horizontal flex container).

Flex items have a minimum "main-size" (min-width if they're in a horizontal container, min-height if they're in a vertical container) which is basically the width of their contents.  They won't shrink below that size, despite "flex-shrink:1", unless you clear it by setting "min-width" to something else.  This is specced in more detail here:
 https://drafts.csswg.org/css-flexbox-1/#min-size-auto

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: "NOT_WORKING" testcase fixed so that it works (added "min-width: 0")

I just added this, to remove the flexbox default "implied minimum width" behavior on the children of your horizontal flex containers:
      [layout][horizontal] > * {
        min-width: 0;
      }
...and that makes your NOT_WORKING testcase work.

Comment 5

[Daniel Holbert [:dholbert]]

(Also: your "WORKING" testcase only works because it only has a single element which is a flex item in a horizontal flex container -- the black div itself. So that black div is the only div that's getting the "implied minimum width" behavior.)

Hopefully this clears things up. Thanks for taking the time to file a bug, in any case!

[Resolving as INVALID since this is us doing what the spec calls for]

Comment 6

[tiago.f.a.correia]

You are right, adding min-width:0 makes it work.

Still it sounds like the default value should have this behaviour.

Comment 7

[Daniel Holbert [:dholbert]]

min-width:0 used to be the default value; the reason that flexbox added this new magic "auto" value is a bit involved, more than I can get into in a bug comment.

Basically, the CSS working group decided that "flex-shrink:1" was a useful default behavior (so that things can shrink for smaller screens, even if authors didn't test that).  But if we let stuff shrink arbitrarily, then flex items will overflow. So, the compromise behavior is: by default, let flex items shrink (in the flex container's main axis), but only down to the item's min-content size.

It's a bit more complex than this (see the spec), but that's the basic idea. (And yes, it still causes surprise/confusion sometimes. :-/  The working group didn't have a better option available to them.)

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/aaf1a83844cf
improve release automation publishing of releases - allow pushes to be scheduled instead of done directly. r=rail

Comment 9

[Loic]

Pulsebot is drunk. :D

Comment 10

[Ryan VanderMeulen [:RyanVM]]

No, the push just had the wrong bug # in the commit message (should have been bug 1347212).