JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<div class="wrapper">
    <p>Some content of unknown size</p>
    <div class="row-parent">
        <div class="row-child">
            Should be inside
        </div>
        <div class="row-child">
            Should be outside
        </div>
        <div class="row-child">
            Should be outside
        </div>
    </div>
</div>
<div class="wrapper">
    <p>Some content of unknown size</p>
    <div class="column-parent">
        <div class="column-child">
            Should be inside green
        </div>
        <div class="column-child">
            Should be outside green
        </div>
        <div class="column-child">
            Should be outside green
        </div>
    </div>
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }

.wrapper {
    display: flex; flex-direction: column;
    height: 150px; width: 200px;
    border: 4px solid green; margin: 24px;
}

.row-parent {
    flex: 1 0 auto;
    display: flex; flex-direction: row;
    border: 2px solid blue;
}

.row-child {
    flex: 0 0 100%;
    border: 2px solid red;
}
.wrapper > p { flex: 0 0 50%; }
.column-parent {
    flex: 1 0 auto; height: 50%;
    display: flex; flex-direction: column;
    border: 2px solid blue;
}

.column-child {
    flex: 0 0 100%; 
    border: 2px solid red;
}