JSFiddle - React, Tailwind, and code Playground

by enyojs

HTML

<div class="stretch-children" style="background:yellow;">
No explicit heights
<div class="class-height" style="display:inline-block; background:red; width:30px;">
</div>
</div>

<br>

<div class="stretch-children" style="background:orange; height:30px;">
Explicit height on parent
<div class="class-height" style="display:inline-block; background:red; width:30px;">
</div>
</div>

<br>

<div class="stretch-children" style="background:lightgreen;">
Explicit height on child
<div class="class-height" style="display:inline-block; background:red; width:30px; height:30px;">
</div>
</div>

<br>

<div class="stretch-children" style="background:lightblue; position:relative;">
Position absolute on child
<div class="class-height" style="display:inline-block; background:red; width:30px; position:absolute;">
</div>
</div>

CSS

.class-height: {
    height:30px;
}

.stretch-children > * {
    height:100%;
}