JSFiddle - React, Tailwind, and code Playground

HTML

<div class=menu>
    <div class=somechildren>I'd like the menu's</div>
    <div class=somechildren>width to fit nicely</div>
    <div class=somechildren>around these children</div>
    
    <div class=separate></div>
    
    <div class=statusmessage>
        While forcing this status message to wrap and grow its height, without affecting the width of the container.
    </div>
</div>
<div class=page>
    The page
</div>

CSS

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
}
.page {
    flex-grow: 1;
    background-color: yellow;
}
.menu {
    background-color: red;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}
.somechildren {
    white-space: nowrap;
    background-color: green;
    border: 1px solid black;
}
.menu > * {
    flex-shrink: 0;
}
.separate {
    flex-grow: 1;
}
.statusmessage {
    background-color: magenta;
    align-self: flex-end;
    width:0;
    min-width:100%;
    /*display: none;*/
}