flexbox-min-bsize-keywords-vert-1.html (1152B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Test: Testing a vertical flex container with keywords on min-height</title> 9 <meta charset="utf-8"> 10 <style> 11 .container { 12 display: flex; 13 width: -moz-fit-content; 14 width: fit-content; 15 flex-direction: column; 16 } 17 .container > * { 18 border: 1px solid black; 19 flex-basis: 0; 20 } 21 .itemA { 22 background: purple; 23 min-height: -moz-max-content; 24 min-height: max-content; 25 } 26 .itemB { 27 background: teal; 28 min-height: -moz-min-content; 29 min-height: min-content; 30 } 31 .itemC { 32 background: blue; 33 min-height: -moz-fit-content; 34 min-height: fit-content; 35 } 36 .itemD { 37 background: yellow; 38 min-height: -moz-available; 39 min-height: -webkit-fill-available; 40 } 41 </style> 42 </head> 43 <body> 44 <div class="container"> 45 <div class="itemA">itemA</div> 46 <div class="itemB">itemB</div> 47 <div class="itemC">itemC</div> 48 <div class="itemD">itemD</div> 49 </div> 50 </body> 51 </html>