flex-minimum-height-flex-items-012.html (1088B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: Combining 100% heights with min-height: auto should not lead to overflow</title> 4 <link rel="author" title="Google LLC" href="https://www.google.com/" /> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> 6 <link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=927066" /> 7 8 <style> 9 .flexbox { 10 display: flex; 11 } 12 13 .column { 14 flex-flow: column; 15 } 16 17 .flexbox span { 18 height: 100%; 19 background: orange; 20 display: block; 21 } 22 </style> 23 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script src="/resources/check-layout-th.js"></script> 26 <body onload="checkLayout('.flexbox')"> 27 <div id=log></div> 28 29 <div class="flexbox column" style="height: 100px; width: 100px; background: green"> 30 <div style="height: 10px; flex: 0.1;" data-expected-height="10"></div> 31 <div style="height: 100%; display: flex; background: teal; flex: 0.9;" data-expected-height="90"> 32 <div style="height: 100%"></div> 33 </div> 34 </div> 35 36 </body> 37 </html>