Are intrinsic sizes supported on width?
With prefixes, and older available value
by David Storey
HTML
<div id="fit-content">
<p>Hello there!</p>
</div>
<div id="min-content">
<p>Hello there!</p>
</div>
<div id="max-content">
<p>Hello there!</p>
</div>
<div id="fill">
<p>Hello there!</p>
</div>
CSS
div {
background-color: silver;
border: 1px solid gray;
}
#fit-content {
width: -webkit-fit-content;
width: -moz-fit-content;
width: -ms-fit-content;
width: fit-content;
}
#min-content {
width: -webkit-min-content;
width: -moz-min-content;
width: -ms-min-content;
width: min-content;
}
#max-content {
width: -webkit-max-content;
width: -moz-max-content;
width: -ms-max-content;
width: max-content;
}
#fill {
width: 100px; /* fallback to show value was applied */
width: -webkit-available;
width: -moz-available;
width: -webkit-fill;
width: -moz-fill;
width: -ms-fill;
width: fill;
}