intrinsic-percent-non-replaced-005.html (1455B)
1 <!DOCTYPE html> 2 <title>Percentages of width on non-replaced blocks are ignored for intrinsic sizing and resolved afterwards</title> 3 <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution"> 4 <link rel="match" href="intrinsic-percent-non-replaced-005-ref.html"> 5 6 <style> 7 /* establish context */ 8 .container { 9 clear: both; 10 padding: 10px; 11 width: 0; 12 } 13 14 span { 15 display: inline-block; 16 width: 20px; 17 height: 20px; 18 background-color: blue; 19 } 20 21 /* visualize size contribution */ 22 .container > div { 23 float: left; 24 border: solid orange 20px; 25 border-style: none solid; 26 } 27 .container > div > div { 28 border-right: solid 20px aqua; 29 writing-mode: vertical-rl; 30 width: 80px; 31 height: 20px; 32 } 33 34 /* test width */ 35 /* content = 100% = 100px = 80px + border */ 36 /* choose sizes that are different than content to see if how they take effect */ 37 .raw-percent { 38 max-width: 50%; 39 } 40 .calc-percent { 41 max-width: calc(40px + 0%); 42 } 43 .no-percent { 44 max-width: 40px; 45 } 46 </style> 47 48 <!-- calculating min-content widths --> 49 <div class='container'> 50 <div><div class="control"><span></span></div></div> 51 </div> 52 <div class='container'> 53 <div><div class="raw-percent"><span></span></div></div> 54 </div> 55 <div class='container'> 56 <div><div class="calc-percent"><span></span></div></div> 57 </div> 58 <div class='container'> 59 <div><div class="no-percent"><span></span></div></div> 60 </div>