flexbox-definite-sizes-001.html (768B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: nested flex containers with height established by 'min-height'</title> 4 <link rel="match" href="flexbox-definite-sizes-001-ref.html"> 5 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1449326"> 8 <style> 9 div { 10 display: flex; 11 } 12 13 .item { 14 width: 100px; 15 background: red; 16 align-items: center; 17 } 18 19 .item span { 20 min-height: 100%; 21 width: 100%; 22 background: green; 23 } 24 </style> 25 <p>Test passes if you see a green 100px x 100px square, and no red</p> 26 <div style="min-height: 100px;"> 27 <div class="item"> 28 <span></span> 29 </div> 30 </div>