W3C home > Mailing lists > Public > www-style@w3.org > May 2013

Re: [css-flexbox] "flex: 1;" does the wrong thing in min-size constraint sizing

From: Ojan Vafai <ojan@chromium.org>
Date: Tue, 14 May 2013 11:51:03 -0700
Message-ID: <CANMdWTuH7hSCi_9u8YWOf2yyRhH1q2dtxfywg7sDC-V8xfhHTg@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style list <www-style@w3.org>
On Tue, May 14, 2013 at 11:12 AM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> Short summary: Flexbox is hard, y'all.
>
> Load up the following code in tip-of-tree webkit or blink:
>
> <!doctype html>
> <div id=parent>
>   <div id=child>foo</div>
> </div>
> <style>
> #parent {
>   display: -webkit-flex;
>   -webkit-flex-flow: column;
>   border: 1px solid;
> }
> #child {
>   -webkit-flex: 1;
> }
> </style>
>
> (If you're not on tip-of-tree, you can get the desired effect by
> setting "min-width: 0;" on the child - this is now the default again
> on ToT.)
>
> The behavior here is that the #parent tries to shrinkwrap its height,
> which is computed from the flex-basis of its children.  However,
> "flex: 1;" sets the flex-basis to 0 (a behavior we wanted from the
> beginning, due to persistent author confusion about why their elements
> that were all "flex: 1;" weren't the same size).  Thus, the shrinkwrap
> height of the #parent is now 0, and the #child overflows.
>
> Per <https://code.google.com/p/chromium/issues/detail?id=240741> and
> <https://bugs.webkit.org/show_bug.cgi?id=116107>, this has already
> broken united.com, and by implication, probably a bunch of other
> Sharepoint sites.
>
> The underlying issue is that you're saying you want the element to
> flex, and we get out of your way and believe you.  But then the
> element is *unable* to flex, because it's being sized under a min-size
> constraint.  This will likely be a common authoring error (after all,
> we already have existence proof of it happening).  It will also happen
> if you float the flexbox, or anything else that shrinkwraps the width,
> but right now WebKit/Blink are buggy and ignore the flex-basis when
> doing width shrinkwrapping.
>
> Proposed solution: we add a new value, provisionally named
> "dont-shrink-me-bro" until someone comes up with something better.
> This value sticks around until used-value time, eventually being
> treated as 'min-content' if the element is sized under a min-size
> constraint, or 0 otherwise.  This becomes the new value for
> 'flex-basis' when it's omitted from the shorthand, so "flex: 1;"
> expands to "flex: 1 1 dont-shrink-me-bro;".
>

What does it mean for an element to be sized under a min-size constraint?


> This seems to handle the problem with a minimum of magic, and might be
> useful outside of flexbox.
>
> (I had thought we might be able to solve this by adopting fantasai's
> suggestion of hooking min-width/height resolution to 'overflow', but
> it doesn't work - this problem is just as bad if #child has a
> scrollbar.)
>
> ~TJ
>
>
Received on Tuesday, 14 May 2013 18:51:59 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:30 UTC