[css3-flexbox] Bad result in flex algorithm when combining stretch, and elements with an aspect ratio (original) (raw)

Rossen pointed out a problem with the flexbox layout algorithm in the following situation:

So, run the layout algorithm:

• In step 3, the image is set to 100px wide and the div to 500px wide.
• In step 6, the div is flexed to 400px wide.
• In step 9, the image is stretched to 100px tall, which also shrinks its width to 50px, due to its aspect ratio.

We now have underflow in the main axis (container is 500px wide, content fills 450px), even though there was a flexible item! This is clearly nonsense. (If the ratio was the other way around, you can similarly get overflow.)

You get similar issues with multiline flexboxes, where 'stretch' can cause a line to be under/overfilled.

The obvious solution here is to move 'stretch' resolution up, to before the current line-breaking and flexing steps. I don't think this is too controversial - aside from this special case, the difference is undetectable.

However, that brings up a further problem. If you first stretch, but the item is also flexible, the flexing can cause it to no longer fill the flex line. In other words, it might simply be impossible to simultaneously honor the aspect ratio, the 'stretch' keyword, and a non-zero "flex" value. This is similar to how you can't always simultaneously honor width, height, and the aspect ratio. We satisfy the latter by breaking the ratio; we consider an explicit width and height to be stronger than the implicit aspect ratio.

We should do the same here. While the width and height aren't explicit in the usual sense, they are determined by strong external constraints, which fill a similar role. So, in the presence of both constraints, we should ignore the aspect ratio, and simply make the element honor the "stretch" and 'flex' constraints.

Any objections? Otherwise, I'll edit the flexbox layout algorithm with the following two changes:

1. Add a bullet point to step 3 (hypothetical main size determination) to handle aspect-ratio items with "stretch" alignment (so they get the correct hypothetical main size).
2. Modify step 9 (handling "stretch" alignment) to have an explicit statement about handling aspect-ratio items, to clarify that it changes the cross-size while ignoring the aspect ratio, so the main size doesn't change.

~TJ

Received on Sunday, 28 October 2012 15:52:37 UTC