CSS Fragmentation Level 3 §2 makes a scroll container — any box with
overflow other than visible — monolithic: it may not be split, so where it
would straddle a page boundary it moves to the next page whole. The two cards below are identical apart
from that one declaration.
Filler paragraph 1. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 2. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 3. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 4. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 5. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 6. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 7. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 8. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 9. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 10. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 11. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 12. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 13. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Filler paragraph 14. This body copy pushes the cards down the page so that each one meets the page boundary rather than sitting comfortably inside a single page.
Nothing forbids a break inside it, so the page boundary cuts straight through: its border and its gradient background end on one page and resume on the next.
Filler paragraph 15. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 16. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 17. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 18. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 19. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 20. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 21. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 22. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 23. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 24. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 25. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 26. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 27. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 28. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 29. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Filler paragraph 30. The same run of body copy again, so the second card meets the following page boundary at the same place its twin met the first one.
Being a scroll container makes it monolithic, so rather than being cut in half it is carried wholesale onto the next page, leaving the gap above it.
Trailing paragraph 31, so the move above has visible content after it.
Trailing paragraph 32, so the move above has visible content after it.
Trailing paragraph 33, so the move above has visible content after it.
Trailing paragraph 34, so the move above has visible content after it.
A box that had already begun flowing its own text across the boundary cannot simply be shifted: its later lines were laid out against the next page's top, so moving the box would carry that distance into it as blank space and leave it reporting height it does not use. The card below holds several lines and meets the boundary part-way through them.
Filler paragraph 35. This run positions the multi-line card so the page boundary falls between its own lines rather than above it.
Filler paragraph 36. This run positions the multi-line card so the page boundary falls between its own lines rather than above it.
Filler paragraph 37. This run positions the multi-line card so the page boundary falls between its own lines rather than above it.
Filler paragraph 38. This run positions the multi-line card so the page boundary falls between its own lines rather than above it.
Filler paragraph 39. This run positions the multi-line card so the page boundary falls between its own lines rather than above it.
Filler paragraph 40. This run positions the multi-line card so the page boundary falls between its own lines rather than above it.
Filler paragraph 41. This run positions the multi-line card so the page boundary falls between its own lines rather than above it.
Filler paragraph 42. This run positions the multi-line card so the page boundary falls between its own lines rather than above it.
Filler paragraph 43. This run positions the multi-line card so the page boundary falls between its own lines rather than above it.
Filler paragraph 44. This run positions the multi-line card so the page boundary falls between its own lines rather than above it.
The page boundary falls part-way through this paragraph, so the box is relocated after some of its text had already been placed on the following page. Because it is laid out again at its destination rather than translated to it, the lines below run on at their normal spacing instead of opening up a band of blank space part-way down the card.
A second paragraph, so the break has somewhere to fall between lines and the effect is visible rather than hidden by a lucky alignment of the page grid.
Trailing paragraph 45.
Trailing paragraph 46.
Trailing paragraph 47.
A break point before a container's first child is the break point before the container (§3.1), so when the child moves the container moves with it. Left behind, the panel below would span the boundary and print an empty copy of its own border and background on the page its contents had just left.
Filler paragraph 65. This run puts the panel's own first child across the page boundary.
Filler paragraph 66. This run puts the panel's own first child across the page boundary.
Filler paragraph 67. This run puts the panel's own first child across the page boundary.
Filler paragraph 68. This run puts the panel's own first child across the page boundary.
Filler paragraph 69. This run puts the panel's own first child across the page boundary.
Filler paragraph 70. This run puts the panel's own first child across the page boundary.
Filler paragraph 71. This run puts the panel's own first child across the page boundary.
Filler paragraph 72. This run puts the panel's own first child across the page boundary.
This card may not be split, so it starts on the next page. The panel around it is not what asked for the break, but the break point is the panel's own, so the panel opens on that page as well rather than being cut open on this one.
A second child, so the panel is visibly more than the card it wraps.
Trailing paragraph 75.
Trailing paragraph 76.
Trailing paragraph 77.
A flex line and a grid row are break points too. The row below asks not to be broken, so it moves to the next page as a unit — every item in it, not only the one that asked, because the cross-axis alignment holds them together.
Filler paragraph 55. This run puts the row below at the foot of its page.
Filler paragraph 56. This run puts the row below at the foot of its page.
Filler paragraph 57. This run puts the row below at the foot of its page.
Filler paragraph 58. This run puts the row below at the foot of its page.
Filler paragraph 59. This run puts the row below at the foot of its page.
Filler paragraph 60. This run puts the row below at the foot of its page.
Filler paragraph 61. This run puts the row below at the foot of its page.
Filler paragraph 62. This run puts the row below at the foot of its page.
Filler paragraph 63. This run puts the row below at the foot of its page.
Filler paragraph 64. This run puts the row below at the foot of its page.
Its line meets the page boundary, so the whole line moves.
It moves with its neighbour rather than being left behind.
A grid row travels together for the same reason.
An item spanning several rows travels with the first of them.
A wrapping flex container whose middle line meets the page boundary. That line moves to the next page, and every line below it moves with it — a line does not stay where it was while the one above it leaves, and the container's own height grows by what its content travelled.
Filler paragraph 85. This run puts the second of the three lines below across the boundary.
Filler paragraph 86. This run puts the second of the three lines below across the boundary.
Filler paragraph 87. This run puts the second of the three lines below across the boundary.
Filler paragraph 88. This run puts the second of the three lines below across the boundary.
Filler paragraph 89. This run puts the second of the three lines below across the boundary.
Filler paragraph 90. This run puts the second of the three lines below across the boundary.
Filler paragraph 91. This run puts the second of the three lines below across the boundary.
Filler paragraph 92. This run puts the second of the three lines below across the boundary.
Filler paragraph 93. This run puts the second of the three lines below across the boundary.
Filler paragraph 94. This run puts the second of the three lines below across the boundary.
Filler paragraph 95. This run puts the second of the three lines below across the boundary.
Sized so three lines of two wrap inside the container.
Sized so three lines of two wrap inside the container.
Sized so three lines of two wrap inside the container.
Sized so three lines of two wrap inside the container.
Sized so three lines of two wrap inside the container.
Sized so three lines of two wrap inside the container.
§3.1 states a forced break of the break point, not of a box: it is taken if the earlier
item's break-after or the later item's break-before asks for one. The first
line below declares break-after: page, so the line after it opens the next page even
though nothing in that line asks for anything.
Filler paragraph 96. There is room left on this page, so nothing but the declared break moves the second line off it.
Filler paragraph 97. There is room left on this page, so nothing but the declared break moves the second line off it.
Filler paragraph 98. There is room left on this page, so nothing but the declared break moves the second line off it.
This line stays where the flow put it — the break is after it, not before it.
Its neighbour on the same line, declaring the same thing.
Nothing here asks for a break, yet the line opens the next page: the break point above it was forced from the other side.
It travels with its line, as a line always does.
§3.1's other half. A break-avoidance value on either side of a break point forbids an
unforced break there, and honouring it means moving the earlier line: the line below travels
to the next page because it may not be cut, and the line chained to it by
break-after: avoid follows rather than being stranded at the foot of the page its
successor just left. This is the user-agent print sheet's h1–h6 { break-after: avoid }
for a heading that happens to be a flex item.
Filler paragraph 100. This run puts the pair of lines below at the foot of their page.
Filler paragraph 101. This run puts the pair of lines below at the foot of their page.
Filler paragraph 102. This run puts the pair of lines below at the foot of their page.
Filler paragraph 103. This run puts the pair of lines below at the foot of their page.
Filler paragraph 104. This run puts the pair of lines below at the foot of their page.
Filler paragraph 105. This run puts the pair of lines below at the foot of their page.
Filler paragraph 106. This run puts the pair of lines below at the foot of their page.
Filler paragraph 107. This run puts the pair of lines below at the foot of their page.
Filler paragraph 108. This run puts the pair of lines below at the foot of their page.
Filler paragraph 109. This run puts the pair of lines below at the foot of their page.
Filler paragraph 110. This run puts the pair of lines below at the foot of their page.
Nothing here asks to move. It travels because the break point below it may not be broken.
A line moves as a unit, so this comes along.
This line meets the page boundary and may not be cut, so it opens the next page.
The two lines arrive together, with the spacing between them preserved.
flex-wrap: wrap-reverse reverses where the lines sit, so the first line in the source
is the last one down the page. What follows a line that moves is the line physically below it,
which here is the earlier one in the source; and the break point between the two is the one
above it. Read the source order as though it ran down the page and the moved line is drawn over the
top of a line that stayed where it was.
Filler paragraph 120. This run puts the container's upper line — the second of the two in the source — across the page boundary.
Filler paragraph 121. This run puts the container's upper line — the second of the two in the source — across the page boundary.
Filler paragraph 122. This run puts the container's upper line — the second of the two in the source — across the page boundary.
Filler paragraph 123. This run puts the container's upper line — the second of the two in the source — across the page boundary.
Filler paragraph 124. This run puts the container's upper line — the second of the two in the source — across the page boundary.
Filler paragraph 125. This run puts the container's upper line — the second of the two in the source — across the page boundary.
Filler paragraph 126. This run puts the container's upper line — the second of the two in the source — across the page boundary.
Filler paragraph 127. This run puts the container's upper line — the second of the two in the source — across the page boundary.
Last down the page, though first in the source. It follows the line above it rather than staying behind when that line leaves.
Its neighbour on the same line, travelling with it as a line always does.
First down the page. This line meets the boundary and may not be cut, so it opens the next page.
The two lines arrive in the order they are drawn in, one below the other.