JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container-entire">
        <div id="toolbar">
            <p>This toolbar should be sized according to its content.</p>
        </div>
        <div id="content">
            <div>This should</div>
            <div>take up</div>
            <div>remaining</div>
            <div>vertical space</div>
            <div>but</div>
            <div>show</div>
            <div>vertical</div>
            <div>scrollbars</div>
            <div>when</div>
            <div>its content</div>
            <div>exceeds</div>
            <div>the vertical</div>
            <div>space</div>
            <div>available.</div>
            <div>This should</div>
            <div>take up</div>
            <div>remaining</div>
            <div>vertical space</div>
            <div>but</div>
            <div>show</div>
            <div>vertical</div>
            <div>scrollbars</div>
            <div>when</div>
            <div>its content</div>
            <div>exceeds</div>
            <div>the vertical</div>
            <div>space</div>
            <div>available.</div>
            <div>This should</div>
            <div>take up</div>
            <div>remaining</div>
            <div>vertical space</div>
            <div>but</div>
            <div>show</div>
            <div>vertical</div>
            <div>scrollbars</div>
            <div>when</div>
            <div>its content</div>
            <div>exceeds</div>
            <div>the vertical</div>
            <div>space</div>
            <div>available.</div>
        </div>
    </div>
</body>

CSS

body {
    height: 100%;
    margin: 0px;
}

html {
    height: 100%;
}

#container-entire {
    background-color: blue;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#content {
    background-color: #ceecf5;
    flex-grow: 1;
    overflow: auto;
}

#toolbar {
    background-color: #81bef7;
    color: white;
    flex-shrink: 0

}