| <!DOCTYPE html> |
| <title>Reference</title> |
| |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <style> |
| /* establish context */ |
| .container { |
| clear: both; |
| padding: 10px; |
| color: blue; |
| font: 20px/1 Ahem; |
| } |
| .zero { |
| width: 0; |
| } |
| .infinite { |
| width: 400px; /* close enough */ |
| } |
| |
| /* visualize size contribution */ |
| .container > div { |
| float: left; |
| border: solid orange 20px; |
| border-style: none solid; |
| } |
| .container > div > div { |
| border-right: solid 20px aqua; |
| } |
| |
| /* controls for min-width */ |
| /* content = 100% = 80px = 4ch + border */ |
| /* choose sizes that are larger than content to see if how they take effect */ |
| .control { |
| width: 60px; |
| } |
| .raw-percent, |
| .calc-percent { |
| width: 160px; |
| margin-right: -100px; |
| } |
| .no-percent { |
| width: 160px; |
| } |
| </style> |
| |
| <!-- calculating min-content widths --> |
| <div class='zero container'> |
| <div><div class="control">ppp pp</div></div> |
| </div> |
| <div class='zero container'> |
| <div><div class="raw-percent">ppp pp</div></div> |
| </div> |
| <div class='zero container'> |
| <div><div class="calc-percent">ppp pp</div></div> |
| </div> |
| <div class='zero container'> |
| <div><div class="no-percent">ppp pp</div></div> |
| </div> |
| |
| <!-- calculating max-content widths --> |
| <div class='infinite container'> |
| <div><div class="control">p p</div></div> |
| </div> |
| <div class='infinite container'> |
| <div><div class="raw-percent">p p</div></div> |
| </div> |
| <div class='infinite container'> |
| <div><div class="calc-percent">p p</div></div> |
| </div> |
| <div class='infinite container'> |
| <div><div class="no-percent">p p</div></div> |
| </div> |
