intrinsic size block

by Boris Chiou

HTML

<!-- width tests -->
<div class="container">
    <div class="child" style="width: max-content; width: -moz-max-content;">
        <div class="content"></div><div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="width: min-content; width: -moz-min-content;">
        <div class="content"></div><div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="width: fit-content; width: -moz-fit-content;">
        <div class="content"></div><div class="content"></div>
    </div>
</div>

<div class="container" style="width: 50px">
    <div class="child" style="width: fit-content; width: -moz-fit-content;">
        <div class="content"></div><div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="width: -webkit-fill-available; width: -moz-available">
        <div class="content"></div><div class="content"></div>
    </div>
</div>

<!-- min-width tests -->
<div class="container">
    <div class="child" style="min-width: max-content; min-width: -moz-max-content; width: 10px;">
        <div class="content"></div><div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="min-width: min-content; min-width: -moz-min-content; width: 10px;">
        <div class="content"></div><div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="min-width: fit-content; min-width: -moz-fit-content; width: 10px;">
        <div class="content"></div><div class="content"></div>
    </div>
</div>

<div class="container" style="width: 50px">
    <div class="child" style="min-width: fit-content; min-width: -moz-fit-content; width: 10px;">
        <div class="content"></div><div class="content"></div>
    </div>
</div>

<div class="container">
    <div class="child" style="min-width: -webkit-fill-available; min-width: -moz-available; width: 10px;">
        <div class="content"></div><div...

CSS

<style>
.container {
    border: 5px solid blue;
    width: 250px;
    height: 250px;
}
.child {
    border: 5px solid pink;
}
.content {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: salmon;
}