1838852 - Width of flex-child with columns layout is calculated wrong / badly.

Status: NEW

(Core :: Layout: Flexbox, defect)

Description

[Markus Mathieu]

Steps to reproduce:

I have a standard flex container with two children.
The first child hast (left) hast some paragraphs of text, the second child contains an address who's lines are set not to wrap.

Flex-box balances the width of the children as expected - basically giving the first child all that is left by the second child.

As soon as I set the layout of the first child to CSS columns with column-count: auto ans column-width: 'some-length-value' I always get the width of the first child set to only the width of one column, and the second child gets the rest-width.

Actual results:

Only one (very high) column is displayed, in the first child, the second child gets the rest of the available space.

Expected results:

I would expect the width ratio of the two children to be roughly the same as without columns in the first child, and the columns using the available (balanced) space as instructed by CSS. (WebKit Browsers handle it as expected.)

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Flexbox' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:dholbert, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[Daniel Holbert [:dholbert]]

Sorry for the delayed response here. Could you please include or link to a testcase that reproduces the issue, just to be sure we're looking at the same thing that you're describing?

Comment 4

[Markus Mathieu]

Hi, I've thrown together a page that should demonstrate the behavior:

https://thewebworks.de/flex-child-with-columns/

Thank You for caring.

Comment 5

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Standalone testcase for https://thewebworks.de/flex-child-with-columns/

Thanks for attaching the testcase that demonstrates the issue. I can see the actual result on Firefox. I grab a copy in case the example goes away.

Comment 6

[Markus Mathieu]

Great. I will leave the page online for a while, nevertheless.

Comment 7

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Hi Markus,

I think Firefox's rendering is somewhat reasonable.

For the first flex item, the column-width: 38ch is just a suggestion to the browser about the desired column width [1]. Since column-count is auto and flex-grow is the default value 0, Firefox will happily fits everything in one column with the specified column width of 38ch without trying to enlarge the width of the first flex item to create more columns. This is a combined effect of how the flexbox determines its item's intrinsic width and the multi-column layout reports its desired width to the parent.

As a workaround, if you set flex-grow: 1 to the first item, you can see the expected result like Google Chrome. Does this make sense to you? If so, I'm inclined to close this as WORKSFORME.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

Comment 8

[Markus Mathieu]

Hi,

Thank you for your answer. I have to agree that it is “somewhat” reasonable. My understanding of a “good” behavior of flex balancing out the track-size between elements in 'full-auto' would be that also the second (other) cells should be considered. And as in that case, the other cell clearly has max-content that (in most cases) can not fill the “rest”, while column auto clearly could fill a lot more, I find the way of dealing with the situation mostly unreasonable.
Also, the other vendors seem to be on my side with this, and while it isn't hard for me to solve the problem by further defining flex-shrink and flex-grow in this case, I hate to see different behavior in different modern browsers.

I'm not sure what the specs say about the situation, or if it is even addressed there, though.

Comment 9

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Thanks for the reply. I've filed bug 1844870 for the max-content width of a multi-column container. I think this is the root cause of the different behavior in your testcase.

I'm not sure what the specs say about the situation, or if it is even addressed there, though.

Filed https://github.com/w3c/csswg-drafts/issues/9103

Comment 10

[Markus Mathieu]

Great effort. Thank you for caring.