| <!doctype html> | |
| <style> | |
| body * { | |
| border: 5px solid red; | |
| padding: 5px; | |
| clear: both; | |
| } | |
| span { | |
| display: inline-block; | |
| width: 200px; | |
| border-color: green; | |
| } | |
| .float { | |
| float: left; | |
| } | |
| #container { | |
| width: 150px; | |
| border-color: blue; | |
| } | |
| #container::after { | |
| content: "."; | |
| clear: both; | |
| height: 0; | |
| width: 0; | |
| display: block; | |
| visibility: hidden; | |
| } | |
| /* | |
| fit-content and min-content in this test should both do float like | |
| shrink wrapping. | |
| */ | |
| .fit-content, | |
| .min-content { | |
| float: left; | |
| } | |
| /* | |
| max-content acts as though no line breaks were taken. | |
| */ | |
| .max-content { | |
| white-space: nowrap; | |
| display: inline-block; | |
| } | |
| </style> | |
| <div id="container"> | |
| <div class="min-content"> | |
| <span>Min Content</span> on this box. | |
| </div> | |
| <div class="max-content"> | |
| <span>Max Content</span> on this box. | |
| </div> | |
| <div class="float"> | |
| <span>Float</span> on this box. | |
| </div> | |
| <div> | |
| <span>Fill Available</span> on this box. | |
| </div> | |
| <div class="fit-content"> | |
| <span>Fit Content</span> on this box. | |
| </div> | |
| </div> |