flex-minimum-height-flex-items-010.html (1957B)
1 <!DOCTYPE html> 2 <title>Tests correct handling of min-height: min-content with dynamic changes</title> 3 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths" title="4.5. Implied Minimum Size of Flex Items" /> 4 <link rel="author" title="Google Inc." href="http://www.google.com/"> 5 <link href="support/flexbox.css" rel="stylesheet"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/check-layout-th.js"></script> 9 <style> 10 .container { 11 height: 300px; 12 outline: 2px solid black; 13 } 14 15 .inner 16 { 17 width: 400px; 18 flex: 1; 19 background-color: green; 20 } 21 #container2 .flexbox > * { flex-basis: 0; } 22 #container2 .column > * { flex-basis: auto; } 23 .container .flexbox { min-height: min-content; } 24 .container > .flexbox { min-height: 0; } 25 </style> 26 <script> 27 function change() { 28 var container = document.getElementById('container'); 29 container.offsetHeight; 30 container.style.height = '80px'; 31 container = document.getElementById('container2'); 32 container.offsetHeight; 33 container.style.height = '80px'; 34 checkLayout('.container'); 35 } 36 </script> 37 <body onload="change()"> 38 <p>Green rectangle should be entirely within the black rectangle</p> 39 <div id="log"></div> 40 <div id="container" class="container"> 41 <div class="flexbox column" style="height: 100%;"> 42 <div class="flexbox flex-one"> 43 <div class="flexbox column"> 44 <div class="flexbox column flex-one"> 45 <div class="inner" data-expected-height="80"> 46 </div> 47 </div> 48 </div> 49 </div> 50 </div> 51 </div> 52 53 <div id="container2" class="container"> 54 <div class="flexbox column" style="height: 100%;"> 55 <div class="flexbox flex-one"> 56 <div class="flexbox column"> 57 <div class="flexbox column flex-one"> 58 <div class="inner" data-expected-height="80"> 59 </div> 60 </div> 61 </div> 62 </div> 63 </div> 64 </div>