vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html (2665B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 CSS Reference Case: Different values of width:auto container in vertical wm 6 </title> 7 <meta charset="utf-8"> 8 <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 10 <meta name="flags" content="ahem"> 11 <style> 12 html,body { 13 margin: 0; 14 } 15 16 .outer { 17 writing-mode: vertical-lr; 18 display: inline-block; 19 } 20 21 .outer * { 22 border: 2px solid lime; 23 display: inline-block; 24 } 25 26 .container { 27 height: 80px; 28 border-color: blue; 29 vertical-align: bottom; 30 31 font-family: Ahem; 32 font-size: 8px; 33 line-height: 13px; 34 } 35 36 .too-small { 37 width: 10px; 38 } 39 40 .too-big { 41 width: 100px; 42 } 43 </style> 44 </head> 45 <body> 46 <div class="outer"> 47 <div class="container"> 48 <div>auto<br>container: min-content.</div> 49 <div>auto<br>container: min-content.</div> 50 </div> 51 <div class="container"> 52 <div class="too-small">10px<br>container: min-content.</div> 53 <div class="too-small">10px<br>container: min-content.</div> 54 </div> 55 <div class="container"> 56 <div class="too-big">150px<br>container: min-content.</div> 57 <div class="too-big">150px<br>container: min-content.</div> 58 </div> 59 60 <div class="container"> 61 <div>auto<br>container: max-content.</div> 62 <div>auto<br>container: max-content.</div> 63 </div> 64 <div class="container"> 65 <div class="too-small">10px<br>container: max-content.</div> 66 <div class="too-small">10px<br>container: max-content.</div> 67 </div> 68 <div class="container"> 69 <div class="too-big">100px<br>container: max-content.</div> 70 <div class="too-big">100px<br>container: max-content.</div> 71 </div> 72 </div> 73 74 <div class="outer"> 75 <div class="container"> 76 <div>auto<br>container: auto.</div> 77 <div>auto<br>container: auto.</div> 78 </div> 79 80 <div class="container"> 81 <div class="too-small">10px<br>container min-size: min-content.</div> 82 <div class="too-small">10px<br>container min-size: min-content.</div> 83 </div> 84 85 <div class="container"> 86 <div class="too-small">10px<br>container min-size: max-content.</div> 87 <div class="too-small">10px<br>container min-size: max-content.</div> 88 </div> 89 90 <div class="container"> 91 <div class="too-big">100px<br>container max-size: min-content.</div> 92 <div class="too-big">100px<br>container max-size: min-content.</div> 93 </div> 94 95 <div class="container"> 96 <div class="too-big">100px<br>container max-size: max-content.</div> 97 <div class="too-big">100px<br>container max-size: max-content.</div> 98 </div> 99 </div> 100 </body> 101 </html>