intrinsic-percent-non-replaced-004-ref.html (1253B)
1 <!DOCTYPE html> 2 <title>Reference</title> 3 4 <style> 5 /* establish context */ 6 .container { 7 clear: both; 8 padding: 10px; 9 width: 0; 10 } 11 12 span { 13 display: inline-block; 14 width: 20px; 15 height: 20px; 16 background-color: blue; 17 } 18 19 /* visualize size contribution */ 20 .container > div { 21 float: left; 22 border: solid orange 20px; 23 border-style: none solid; 24 } 25 .container > div > div { 26 border-right: solid 20px aqua; 27 writing-mode: vertical-rl; 28 width: 40px; 29 height: 20px; 30 } 31 32 /* controls for min-width */ 33 /* content = 100% = 80px = 4ch + border */ 34 /* choose sizes that are larger than content to see if how they take effect */ 35 .container > div > .raw-percent { 36 width: 120px; 37 } 38 .container > div > .calc-percent, 39 .container > div > .no-percent { 40 width: 160px; 41 } 42 </style> 43 44 <!-- calculating min-content widths --> 45 <div class='container'> 46 <div><div class="control"><span></span></div></div> 47 </div> 48 <div class='container'> 49 <div style='width: 60px;'><div class="raw-percent"><span></span></div></div> 50 </div> 51 <div class='container'> 52 <div><div class="calc-percent"><span></span></div></div> 53 </div> 54 <div class='container'> 55 <div><div class="no-percent"><span></span></div></div> 56 </div>