flex-minimum-height-flex-items-009.html (1848B)
1 <!DOCTYPE html> 2 <title>Tests correct handling of min-height: auto with dynamic changes</title> 3 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" 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 </style> 24 <script> 25 function change() { 26 var container = document.getElementById('container'); 27 container.offsetHeight; 28 container.style.height = '80px'; 29 container = document.getElementById('container2'); 30 container.offsetHeight; 31 container.style.height = '80px'; 32 checkLayout('.container'); 33 } 34 </script> 35 <body onload="change()"> 36 <p>Green rectangle should be entirely within the black rectangle</p> 37 <div id="log"></div> 38 <div id="container" class="container"> 39 <div class="flexbox column" style="height: 100%;"> 40 <div class="flexbox flex-one"> 41 <div class="flexbox column"> 42 <div class="flexbox column flex-one"> 43 <div class="inner" data-expected-height="80"> 44 </div> 45 </div> 46 </div> 47 </div> 48 </div> 49 </div> 50 51 <div id="container2" class="container"> 52 <div class="flexbox column" style="height: 100%;"> 53 <div class="flexbox flex-one"> 54 <div class="flexbox column"> 55 <div class="flexbox column flex-one"> 56 <div class="inner" data-expected-height="80"> 57 </div> 58 </div> 59 </div> 60 </div> 61 </div> 62 </div>