block-size-with-min-or-max-content-1-ref.html (1129B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Reference Case: Basic cases with max-content and min-content</title> 4 <meta charset="utf-8"> 5 <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <meta name="flags" content="ahem"> 8 <style> 9 html,body { 10 margin: 0; 11 } 12 .container { 13 width: max-content; 14 height: 50px; 15 border: 1px solid black; 16 17 font-family: Ahem; 18 font-size: 15px; 19 line-height: 21px; 20 } 21 .container > * { 22 display: inline-block; 23 border: 1px solid blue; 24 } 25 26 .container-vertical { 27 width: 50px; 28 border: 1px solid black; 29 30 font-family: Ahem; 31 font-size: 15px; 32 line-height: 21px; 33 } 34 .container-vertical > * { 35 writing-mode: vertical-lr; 36 border: 1px solid blue; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="container"> 42 <div>min<br>in the box</div> 43 <div>max<br>in the box</div> 44 </div> 45 46 <div class="container-vertical"> 47 <div>min<br>in the box</div> 48 <div>max<br>in the box</div> 49 </div> 50 </body> 51 </html>