Re: [css3-flexbox] resolving flexible lengths

On Thu, Sep 29, 2011 at 8:39 PM, Ojan Vafai <ojan@chromium.org> wrote:
> 2. It should be a requirement that flex items with a positive flex fill the
> flexbox if possible given min/max constraints. Specifically, the currently
> specced algorithm does the wrong thing in this case:
> <div style="display: flexbox; width: 200px">
>     <div style="width: flex(1 0 50px); min-width: 100px;"></div>
>     <div style="width: flex(1 0 100px); max-width: 50px;"></div>
> </div>
> The first flex-item should have a width of 150, but instead it currently
> gets a width of 100. Talking to Tab offline he suggested the following
> solution:
> "Looks like the fix is to separate them into different steps, with either
> one having the ability to restart the algorithm.  If there is
> positive free space, resolve max first; if there is negative free space,
> resolve min first."
>
> Seems fine to me.

Nope, that doesn't work either.  Doing either of them first will
result in less-than-ideal layouts in some cases.  Take the following:

<div style="display: flexbox; width: 200px;">
  <div style="width: flex(1); max-width: 90px;"></div>
  <div style="width: flex(1); min-width: 150px;"></div>
</div>

Both start from a preferred size of 0px, so there's positive free space.

1. Both start from 0 and split the 200px of free space equally, so
both have a width of 100px.
2. This puts the first item in violation of its max-width.  Set it to
90px wide and non-flexible.
3. There's now 110px of free space, so the second gets all of it.
4. This puts the second in violation of its min-width.  Set it to
150px and non-flexible.
5. There are no flexible items, so end the algorithm.

We're left with 240px worth of items in a 200px-wide flexbox, so they
overflow.  If the min-width constraints were resolved first, you'd
instead land on the valid and non-overflowing solution of the first
being 50px and the second being 150px.  So, in this situation, doing
min-width first is better.

On the other hand, consider what happens if we just change the flexbox
to 260px wide, and resolve min-widths first:

<div style="display: flexbox; width: 200px;">
  <div style="width: flex(1); max-width: 90px;"></div>
  <div style="width: flex(1); min-width: 150px;"></div>
</div>

1. Both start from 0 and split the 260px of free space equally, so
both have a width of 130px.
2. This puts the second item in violation, so set it to 150px and non-flexible.
3. There's now 110px of free space, so the first gets all of it.
4. This puts the first in violation, so set it to 90px and non-flexible.
5. There are no flexible items, so end the algorithm.

Now we have 240px worth of items in a 260px wide flexbox, so they
aren't filling the space.  If the max-width constraints were resolved
first, you'd instead land on the valid and space-filling solution of
the first being 90px and the second being 170px.  So, in this
situation, doing max-width first is better.

In other words, doing either first is bad.  I'm trying to figure out
how to explicitly phrase the "correct" way to do this, so you always
find a space-filling and non-overflowing situation when one exists.

~TJ

Received on Monday, 17 October 2011 01:08:27 UTC