How to combine absolute position, Flexbox and dynamic dimensioning?

Let, a floating container with dynamic height defined by the content. The content is made of two elements:

• a clickable title bar that toggles the next element
• a sub-container able to control the vertical overflow, and whose dynamic height must take the maximum remaining space, but if and only if there is enough content to make it using this remaining space.

<div class="container">
  <div class="title-bar">Click me</div>
  <div class="sub-container">
    <div class="stuff"></div>
    <div class="stuff"></div>
    <div class="stuff"></div>
    <div class="stuff"></div>
  <div>
</div>

.container {
  display: flex;
  position: absolute;
  flex-direction: column;
}

.title-bar {
  padding: 10px;
  background-color: blue;
}

.sub-container {
  display: flex;

  // so it only takes the space left after .title-bar has taken its space
  flex-grow: 1;
  height: 0;

  overflow-y: auto;
  flex-direction: column;
}

.stuff {
  height: 50px;
}

.stuff:nth-child(even) {
  background-color: grey;
}

.stuff:nth-child(odd) {
  background-color: red;
}

The problem is this doesn't work, of course, because I have to use the flexbox hack (flex-grow: 1 + height: 0) which sets the height to 0. So, how could I get the .sub-container content to set the height of the .sub-container, but also have the .sub-container only take up the remaining space, so that .title-bar is still visible, and the .sub-container content is scrolling under it?

The goal is to have a collapsible box over a card, with a title always visible, and options to (un)check inside: