contain-intrinsic-size-011-ref.html (747B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: flex column</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 #flex { 9 display: flex; 10 flex-direction: column; 11 width: 100px; 12 height: 200px; 13 } 14 .item { 15 border: 1px solid black; 16 box-sizing: content-box; 17 } 18 #one { 19 background: lightblue; 20 height: 11px; 21 flex-grow: 3; 22 } 23 #two { 24 background: lightgreen; 25 height: 22px; 26 flex-grow: 2; 27 } 28 #three { 29 background: lightgrey; 30 height: 33px; 31 flex-grow: 1; 32 } 33 </style> 34 35 <div id=flex> 36 <div class=item id=one></div> 37 <div class=item id=two></div> 38 <div class=item id=three></div> 39 </div>