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