1525706 - column-count css property allows list items to spill over to the next column

Status: RESOLVED INVALID

(Core :: Layout: Columns, defect)

Description

[rgelbhb]

Attachment: fo.htm

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

The column-count property works differently in Firefox than it does in every other browser. At certain width an <li> item spills over into the next column. Note here how firefox stacks up against other browsers: https://imgur.com/a/9NGGm4S

The problem can be fixed by adding setting page-break-inside to avoid.

.comparison-card-list > li {
page-break-inside: avoid;
}

but I should have to do that.

Actual results:

<li>Placement on Company Offer Marketplace</li> spills over into the next column

Expected results:

Shouldn't spill over.

Comment 1

[Peter Magyari]

Hi,

I can reproduce this issue on Windows 10 and Mac OS 10.14 using Firefox 65.0, Firefox 66.0b6 and Firefox 67.0a1.
I'm going to set a component in order to involve the development team in reviewing this issue.

Thank you for reporting!

Comment 2

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

Attachment: A very long paragraph in <li>

I believe browsers can break the content freely to find the best balance column height without something like page-break-inside: avoid.

See the attached example which contains a very long paragraph in <li>. Google Chrome will still lay it out across columns.

Comment 3

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

Thanks again for reporting this. If you see any other issue, feel free to open another bug. I'll resolve this as invalid per comment 2.