Shrink to fit sizing

25 views
Skip to first unread message

Christian Biesinger

unread,
Dec 14, 2015, 6:51:53 PM12/14/15
to layou...@chromium.org
Hi layout people,

please see this www-style thread:
https://lists.w3.org/Archives/Public/www-style/2015Dec/0180.html

Basically, Microsoft wants us to do layout to compute the preferred
width (in Flexbox but also in general -- Greg shows an example that
doesn't use flex). Based on previous discussions, we don't want to do
that. I'm not sure what to do; maybe someone with more Blink authority
wants to weigh in on that thread?

thanks!
-Christian

Tab Atkins Jr.

unread,
Dec 14, 2015, 7:09:30 PM12/14/15
to Christian Biesinger, layou...@chromium.org
Earlier today, Shane came to me with a layout problem involving
flexbox, and it turned out to be exactly this. He wanted to
"shrinkwrap" a multiline column flexbox, and that requires the
min/max-content size to work "as expected", as fantasai describes in
the thread. Our current implementation is very wrong for him.

It sucks, but *not* doing layout here gives us blatantly broken
behavior. There is zero chance that this will ever *not* be buggy for
authors and cause unwanted overflow. Note that the results of this
affect 'float' on flexboxes, too.

(Our current behavior for calculating width:min/max-content is to
essentially treat it as a single-line flexbox and just set it to that
width. This means that your 2+ columns automatically overflow if you
float the flexbox or use any of *-content keywords. This is dumb.)

~TJ

Morten Stenshorne

unread,
Dec 15, 2015, 5:11:36 AM12/15/15
to Tab Atkins Jr., Christian Biesinger, layou...@chromium.org
Blink's current behavior does indeed have its shortcomings. It fails at
simple tasks like:

<div style="position:absolute;">
<div style="float:left;">All of this text&nbsp;</div>
<div>should be on the same line.</div>
</div>

So does Gecko. Presto and IE have no problem. Presto (IE too, allegedly)
finds intrinsic min/max widths as part of layout. If an object has a
fixed size, its intrinsic size is simply the output from layout. In
other cases it's more complicated, in that we have to imagine that the
available width is 0 and infinite. A similar job to
e.g. LayoutBlockFlow::computeInlinePreferredLogicalWidths() in Blink,
except that it's being done during layout in Presto. Then again, there
are some very Presto-specific reasons why Presto does it during layout.

The separation of calculating intrinsic min/max widths and layout in
Blink has grown on me, and I'd like us to have good reasons to remove
it.

My example above isn't fixed by simply laying out for min/max
calculation anyway. What Blink lacks, is the ability to realize that the
float will be adjacent to the sibling block if max intrinsic width is
satisfied. The way I solved this in Presto (which has nothing to do with
actual layout, BTW, although it happens in the same phase), was to
figure out the hypothetical logical top and logical height of every
object if max intrinsic width were satisfied.

What's the flexbox example?

--
---- Morten Stenshorne, developer, Opera Software ASA ----
------------------ http://www.opera.com/ -----------------

Christian Biesinger

unread,
Dec 15, 2015, 7:33:37 PM12/15/15
to Morten Stenshorne, Tab Atkins Jr., layou...@chromium.org
Thanks for the support :-)

The flexbox example is here: http://codepen.io/anon/pen/pJLwYp (red
box only around the first column)
Bug report at https://code.google.com/p/chromium/issues/detail?id=507397

-Christian

Tab Atkins Jr.

unread,
Dec 16, 2015, 2:32:24 PM12/16/15
to Morten Stenshorne, Christian Biesinger, layou...@chromium.org
Yes, there are larger problems as well related to floats and shrinkwrapping.

> What's the flexbox example?

Take a multiline column flexbox, with enough content to generate >1
line. Give it a background or border or something, so you can see its
size well. Float it, and the problem is obvious. (It overflows, and
there's absolutely no way to fix it without guessing at an explicit
width.)

IE/Edge render this correctly, wrapping the flexbox around its columns.

~TJ
Reply all
Reply to author
Forward
0 new messages