scroll-marker-group-013-ref.html (948B)
1 <!DOCTYPE html> 2 <style> 3 #scroller { 4 overflow: hidden; 5 columns: 2; 6 column-fill: auto; 7 padding: 0; 8 gap: 0; 9 width: 400px; 10 height: 100px; 11 } 12 13 #scroller::scroll-marker-group { 14 display: flex; 15 height: 200px; 16 background: gray; 17 } 18 19 #scroller>div::scroll-marker { 20 display: block; 21 width: 25px; 22 height: 50%; 23 content: ""; 24 background: yellow; 25 } 26 27 fieldset { 28 border: 3px solid black; 29 } 30 </style> 31 <p>There should be a yellow square inside a gray box below, and below that, a 32 fieldset with a legend. The text "first" and "second" should be seen 33 inside.</p> 34 <div style="height:200px; background:gray;"> 35 <div style="width:100px; height:100px; background:yellow;"></div> 36 </div> 37 <fieldset id="scroller"> 38 <legend>Legend</legend> 39 <div style="break-before:column;">first</div> 40 <div style="break-before:column;">second</div> 41 <div style="break-before:column;">third</div> 42 </fieldset>