1616377 - Box with break-inside: avoid is being broken so that the columns can be balanced

Status: RESOLVED DUPLICATE of bug 793686

(Core :: Layout: Columns, defect, P3)

Description

[Ben Visness [:bvisness]]

Attachment: break-avoid-test.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:74.0) Gecko/20100101 Firefox/74.0

Steps to reproduce:

Attempted to use break-inside: avoid to prevent a box in a multi-column layout from being broken across columns.

See the attached file for an example case, or:

• Create a div with column-count: 3.
• Create a div inside it with break-inside: avoid.
• Create three divs inside that, each with the content "test content".

Actual results:

A box with break-inside: avoid was broken across columns in order to balance the columns.

In the example, observe that the box with break-inside has been broken across columns.

Expected results:

The box should not have been broken. This is the behavior in Chrome and Safari.

Comment 1

[Daniel Bodea [:danibodea]]

Using the provided demo, I have reproduced this issue on Windows 10 and Ubuntu 18, on all the latest versions of the main channels.
Thank you for your contribution!

Comment 2

[Cameron McCormack (:heycam)]

TY, is this a fragmentation issue you would like to look at?

Comment 3

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

I don't see any code that makes our multicol implementation handle break-inside:avoid, and this is maybe a duplication of bug 793686.

(Keep the NI as a reminder)

Comment 4

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

This is fixed by bug 793686.