<!doctype html> | |
<style> | |
body * { | |
border: 5px solid red; | |
padding: 5px; | |
} | |
span { | |
display: inline-block; | |
width: 200px; | |
border-color: green; | |
} | |
.max-width-min-content, | |
.max-width-max-content, | |
.max-width-fit-content { | |
display: inline-block; | |
} | |
</style> | |
<div class="max-width-min-content"> | |
<span>Min Content</span><br>on this box. | |
</div> | |
<br> | |
<div class="max-width-max-content"> | |
<span>Max Content</span> on this box. | |
</div> | |
<br> | |
<div class="max-width-fill-available"> | |
<span>Fill Available</span> on this box. | |
</div> | |
<div class="max-width-fit-content"> | |
<span>Fit Content</span> on this box. | |
</div> |