Intrisic size absolute

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;...

CSS

.container {
    position:relative;
    border: 5px solid blue;
    width: 250px;
    height: 250px;
}
.child {
    position:absolute;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    border: 5px solid pink;
}
.content {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: salmon;
}