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