contain-intrinsic-size-021.html (1054B)
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 <link rel="match" href="contain-intrinsic-size-021-ref.html"> 7 <meta name="assert" content="flex container is sized by the largest intrinsic-height of content, even with align-self: stretch"> 8 9 <style> 10 #flex { 11 display: flex; 12 flex-direction: row; 13 flex-wrap: wrap; 14 align-items: flex-start; 15 width: 250px; 16 } 17 .item { 18 border: 1px solid black; 19 } 20 #one { 21 background: lightblue; 22 contain-intrinsic-size: 55px 21px; 23 contain: size; 24 } 25 #two { 26 background: lightgreen; 27 contain-intrinsic-size: 66px 42px; 28 contain: size; 29 } 30 #three { 31 background: lightgrey; 32 align-self: stretch; 33 contain-intrinsic-size: 77px 63px; 34 contain: size; 35 } 36 </style> 37 38 <div id=flex> 39 <div class=item id=one></div> 40 <div class=item id=two></div> 41 <div class=item id=three></div> 42 </div>