contain-intrinsic-size-016.html (1036B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: flex row, items with size containment</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-016-ref.html"> 7 <meta name="assert" content="contain-intrinsic-size take 'priority' over size-containment in flex"> 8 9 <style> 10 #flex { 11 display: flex; 12 flex-direction: row; 13 width: 500px; 14 height: 100px; 15 } 16 .item { 17 border: 1px solid black; 18 contain: size; 19 } 20 #one { 21 background: lightblue; 22 contain-intrinsic-size: 55px 11px; 23 contain: size; 24 flex-grow: 3; 25 } 26 #two { 27 background: lightgreen; 28 contain-intrinsic-size: 66px 22px; 29 contain: size; 30 flex-grow: 2; 31 } 32 #three { 33 background: lightgrey; 34 contain-intrinsic-size: 77px 33px; 35 contain: size; 36 flex-grow: 1; 37 } 38 </style> 39 40 <div id=flex> 41 <div class=item id=one></div> 42 <div class=item id=two></div> 43 <div class=item id=three></div> 44 </div>