JSFiddle - React, Tailwind, and code Playground

HTML

<body id="parent-of-topbar">
    <div id="topbar">top bar content</div>
    <div id="main">
        <div class="subwindow stretchy">stretchy part</div>
        <div class="subwindow fixed">
        fixed sidebar 1; this should be scrollable, not stretch the content
            <details open><div style="font-size: 3em;">spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam</div></details>
        </div>
        <div class="subwindow fixed">2nd fixed sidebar</div>
    </div>
</body>

CSS

* { box-sizing: border-box; } /* new */

html { height: 100%; }

body { height: 100%; } /* new */

#parent-of-topbar {
    height: 100%;  
    box-sizing: border-box;
    margin: 0;
    background: #FCC;
    display: flex;
    flex-direction: column;
}

#topbar {
    padding: .2em;
    background: white;
    border: solid black;
    border-width: 0 0 .3em 0;
    color: black;
    flex: 0 0 auto;
    height: 40px; /* new */
}

#main {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    /* max-height: 100%; */
    height: calc(100% - 40px); /* new */ 
}

.subwindow {
    overflow-x: clip;
    overflow-y: auto;
    max-height: 100%;
    border: 3px outset #CCC;
    background: linear-gradient(to right, #CCC 0%,#AAA 100%);
}

.fixed {
    flex: 0 0 auto;
    width: 10em;
}

.stretchy {
    flex: 1 1 auto;
    width: 100%;
}