break-inside: avoid; is ignored when child count is less than specified column count
Categories
(Core :: Layout: Columns, defect)
Tracking
()
People
(Reporter: jake, Unassigned)
References
Details
Attachments
(1 file)
|
1.54 KB,
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0
Steps to reproduce:
Use the "columns: n;" CSS property where n > 1 and child node count < n and "break-inside: avoid" is set on the child node
Actual results:
The contents of the child node(s) span across multiple columns (i.e. break-inside: avoid is ignored).
Expected results:
The contents of the child nodes should not be spread across multiple columns
|
||
Updated•4 years ago
|
|
||
Comment 1•4 years ago
|
||
It seems the break-inside: avoid property on .child is not entirely ignored here; removing it does change the result I see. But it doesn't seem to be handled correctly.
One possible source of confusion: break-inside is not an inherited property, so although it is set on the .child blocks in this example, it is not set on the <p> elements within them. So a break can occur between lines of a paragraph. This seems a bit counter-intuitive, when an ancestor says to "avoid" breaks, but Safari shows similar behavior; I haven't dug through the specs to confirm if this is correct. Anyhow, adding p { break-inside: inherit; } to the styles makes a difference, though it still doesn't look entirely right.
|
||
Comment 2•4 years ago
|
||
This is similar to bug 1616377 or an older bug 793686. That is, we need a way to respect that the content wants break-inside:avoid during column-balancing.
|
|
||
Comment 3•3 years ago
|
||
This is fixed by bug 793686, and can be tested on Nightly (2022-08-10). However, in the original testcase in comment 0, it might look strange that the entire .child is being placed at the second column while the first column is empty. This is because our current column balancing algorithm might choose a smaller balancing height with the margin-top of the <p> element truncated. Adding p {margin:0} can workaround this and allow the .child being placed at the first column.
Description
•