flex-height-min-content.html (659B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox Test: height: min-content is sized correctly</title> 3 <link rel="author" title="Google LLC" href="http://www.google.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" /> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> 6 <style> 7 #flex { 8 display: flex; 9 flex-direction: column; 10 width: 100px; 11 } 12 13 #item { 14 min-height: 30px; 15 height: min-content; 16 background: green; 17 } 18 </style> 19 20 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 21 22 <div id="flex"> 23 <div id="item"> 24 <div style="height: 100px; width: 100px;"></div> 25 </div> 26 </div>