contain-intrinsic-size-008-ref.html (891B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: writing modes</title> 4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> 6 7 <style> 8 .border { 9 border: 1px solid blue; 10 width: max-content; 11 margin: 5px; 12 } 13 14 .box { 15 background: lightblue; 16 box-sizing: content-box; 17 width: 55px; 18 height: 66px; 19 border-style: solid; 20 border-color: black; 21 border-width: 2px 3px 5px 7px; 22 padding: 11px 13px 17px 19px; 23 } 24 .verticalrl { 25 writing-mode: vertical-rl; 26 } 27 .verticallr { 28 writing-mode: vertical-lr; 29 } 30 .horizontaltb { 31 writing-mode: horizontal-tb; 32 } 33 </style> 34 35 <div class=border><div class="box verticalrl">Lorem</div></div> 36 <div class=border><div class="box verticallr">Ipsum</div></div> 37 <div class=border><div class="box horizontaltb">Dolor</div></div>