contain-intrinsic-size-021-ref.html (821B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: flex row, flex height based on children</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: row; 11 flex-wrap: wrap; 12 align-items: flex-start; 13 width: 250px; 14 } 15 .item { 16 border: 1px solid black; 17 box-sizing: content-box; 18 } 19 #one { 20 background: lightblue; 21 width: 55px; 22 height: 21px; 23 } 24 #two { 25 background: lightgreen; 26 width: 66px; 27 height: 42px; 28 } 29 #three { 30 background: lightgrey; 31 align-self: stretch; 32 width: 77px; 33 height: 63px; 34 } 35 </style> 36 37 <div id=flex> 38 <div class=item id=one></div> 39 <div class=item id=two></div> 40 <div class=item id=three></div> 41 </div>