[csswg-drafts] [css-break] Fragmenting of monolithic content when the alternative is overflow (#13781)

Psychpsyo has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-break] Fragmenting of monolithic content when the alternative is overflow ==
Hello, I am currently implementing fragmentation into [the Ladybird browser](https://github.com/LadybirdBrowser/ladybird) and have come across an interesting case that current browsers are not interoperable on and that [the spec makes optional](https://drafts.csswg.org/css-break/#unforced-breaks:~:text=the%20UA%20may%20also%20fragment%20the%20contents%20of%20monolithic%20elements%20by%20slicing%20the%20element%E2%80%99s%20graphical%20representation):

If I set a limited height for a multicol container and then put a large piece of monolithic content (like an image) inside it, browsers are allowed to either slice this monolithic content into multiple pieces and distribute it across columns or to let it overflow the column it is in and stick out the bottom of the multicol container.

Chromium and Firefox currently let it overflow. WebKit slices it apart. In my opinion, slicing is the better option here. The author indicated that they want their multicol to be no taller than X pixels. If something that is larger than that makes it in there, I personally would hope that the browser handles it in the way that respects the height limit given by the author.
Sure, slicing an image isn't pretty, but letting it overflow and potentially overlap other content on the page is, in my opinion, even worse.

Firefox seems to potentially be open to switching to the WebKit behavior: https://bugzilla.mozilla.org/show_bug.cgi?id=2029259
Chromium has said that their implementation follows the spec and thus works as intended: https://issues.chromium.org/u/1/issues/499336450
I did not file a bug with Safari, since I think they got it right.

Example (WebKit behavior):
<img width="1920" height="345" alt="Image" src="https://github.com/user-attachments/assets/b9b7c615-e6af-4036-8d9e-7e550fc42379" />

Example (Chromium/Firefox behavior):
<img width="1920" height="345" alt="Image" src="https://github.com/user-attachments/assets/cf29b62d-76a2-4773-b98b-2bab78a46619" />

Cutting the dog apart isn't pretty, but at least I can read all the text.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13781 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 9 April 2026 13:16:58 UTC