JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div>
    <header>Select the thing</header>
    <section><ul><li>item</li><li>item</li></ul></section>
    <footer></footer>
</div>

<br>

<div>
    <header>Select the thing</header>
    <section><ul><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li></ul></section>
    <footer></footer>
</div>

<br>

<div>
    <header>Select the thing</header>
    <section><ul><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li></ul></section>
    <footer>You selecter item item and 10 more You selecter item item and 10 more items...</footer>
</div>
    
<br>

<div>
    <section><ul><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li></ul></section>
    <footer>You selecter item item and 10 more You selecter item item and 10 more items...</footer>
</div>

CSS

div {
    display: flex;
    background: red;
    width: 20em;
    flex-direction: column;
    max-height: 40vh
}

* {box-sizing: border-box}

header {
    width: 100%;
    background: pink;
    padding: .5em;
    flex: none;
}

section {
    width: 100%;
    background: blue;
    overflow: scroll
}

footer {
    width: 100%;
    background: purple;
    flex: none;
}