1842305 - CSS columns creates column outside container

Status: NEW

(Core :: Layout: Columns, defect)

Description

[Shaw Jia]

Attachment: column bug.html

Steps to reproduce:

Inside a grid item, create a column with column-gap and column-width defined, and then set direct descendent to break-inside: avoid.

Actual results:

At approx. 1234px wide, an extra column is created that overflows the container.

You may need to resize back and forth a bit to trigger it.

Expected results:

Extra column should not be created.

Comment 1

[Shaw Jia]

Attachment: column bug.png

Demonstrating the extra column

Comment 2

[Shaw Jia]

Btw. I can not replicate this in Chrome.

Comment 3

[David Shin[:dshin] (PTO Til 24th)]

Hi, thanks for the report!

I'm having a bit of trouble reproducing this on Nightly vs. Chrome. I see extra space between the first column and the second column when adjusting sizes. Is this what you're referring to? This happens on Chrome Dev 116 as well for me.

Comment 4

[Shaw Jia]

I can replicate it in Firefox Nightly (117.0a1).

Found a way to exactly replicate it.

1. Open the test page, make sure zoom is 100%
2. Open dev console, activate Responsive Design Mode (Control + Shift + M)
3. Enter "1258" for virtual viewport width, and set it
4. Enter "1257" for virtual viewport width, and set it
5. You should now see extra column to the right and horizontal scrollbar appearing

Please let me know if that helped.

I think know the spacing issue you're referring to, but I've only seen it rarely and cannot seem to replicate it consistently so chose to not mention it.

Comment 5

[Shaw Jia]

I did some more experiment and was able to get the spacing issue you mentioned in Firefox.

To replicate, open or refresh the page in Firefox with the viewport being 1501px or wider, I will see two small columns with a huge gap in-between.

It goes away as soon as I resize the viewport horizontally.

As soon as the width drops to 1500px or lower, the issue stops manifesting.

I don't have Chrome dev installed so I didn't try it there, but it's not showing up in Chrome 114.0.5735.199 for me.

Comment 6

[David Shin[:dshin] (PTO Til 24th)]

Attachment: Reproduced example where an extra column overflows outside

Reproduced - thanks for the detailed steps. Curiously, I could only reproduce this on Windows.
The third column overflows to the right, as highlighted in devtools, where Chrome always flows that content down the second column to avoid overflow.

Separately - the testcase initially loads in a busted state, which I think is what the reporter is referring to. Will attach another screenshot.

Comment 7

[David Shin[:dshin] (PTO Til 24th)]

Attachment: What the testcase looks like on Nightly 117 on initial load

Busted look on load - zoom or inspector makes it go away

Comment 8

[Shaw Jia]

(In reply to David Shin[:dshin] from comment #7)

Created attachment 9343305 [details]
What the testcase looks like on Nightly 117 on initial load

Busted look on load - zoom or inspector makes it go away

As I mentioned in my previous follow up comment, I was able to replicate this;

To replicate, open or refresh the page in Firefox with the viewport being 1501px or wider, I will see two small columns with a huge gap in-between.

It goes away as soon as I resize the viewport horizontally.

As soon as the width drops to 1500px or lower, the issue stops manifesting.