multi-line-row-flex-fragmentation-064-print-ref.html (1249B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 7 <style> 8 @page { size: 5in 3in; margin: 0.5in; } 9 10 :root { 11 print-color-adjust: exact; 12 } 13 14 body { margin: 0; } 15 16 .flexbox { 17 border: 0.25in solid black; 18 font-size: 0.25in; 19 } 20 .item { 21 position: relative; 22 contain: size; 23 box-sizing: border-box; 24 border: 4px solid purple; 25 width: 50%; 26 height: 0.5in; 27 } 28 .gap { 29 height: 0.25in; 30 } 31 </style> 32 33 <!-- This div makes the flexbox not at the top of first page. --> 34 <div style="height: 0.25in; background: gray;"></div> 35 36 <div class="flexbox"> 37 <div class="item" style="width: 100%;">1-1</div> 38 <div class="gap"></div> 39 <div class="item">2-1</div> 40 <div class="gap"></div> 41 <div class="item" style="left: 1.75in;">2-2</div> 42 <div class="gap"></div> 43 <div class="item" style="left: 1.75in;">3-2</div> 44 <div class="gap" style="height: 1.25in;"></div> 45 <div class="item">3-1</div> 46 <div class="gap" style="height: 0.75in;"></div> 47 <div class="item">4-1</div> 48 </div> 49 50 <div style="height: 0.25in; background: gray;"></div> 51 </html>