JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="minimizable-group">
    <div class="minimizable-group-title">Group 1</div>
    <div class="minimizable-group-content">
      <div class="unshrinkable">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
      <div class="shrinkable">Amet venenatis urna cursus eget nunc. Sapien nec sagittis aliquam malesuada. Tortor vitae purus faucibus ornare suspendisse. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Et leo duis ut diam quam. Nisl suscipit adipiscing bibendum
        est ultricies integer quis auctor. Volutpat maecenas volutpat blandit aliquam etiam erat. Fames ac turpis egestas integer eget aliquet nibh. Enim praesent elementum facilisis leo vel. Enim facilisis gravida neque convallis a. Et magnis dis parturient
        montes nascetur ridiculus mus mauris vitae. Amet est placerat in egestas.
        <p /> Vel eros donec ac odio tempor. Purus gravida quis blandit turpis cursus in hac habitasse platea. In aliquam sem fringilla ut morbi tincidunt augue interdum. Diam ut venenatis tellus in metus. Vitae purus faucibus ornare suspendisse sed nisi lacus
        sed. Velit sed ullamcorper morbi tincidunt. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Augue mauris augue neque gravida in fermentum. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Sem et tortor consequat
        id. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Eros donec ac odio tempor orci dapibus ultrices.
      </div>
      <div class="unshrinkable">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </div>
  </div>
  <div class="minimizable-group">
    <div class="minimizable-group-title">Group 2</div>
    <div class="minimizable-group-content">
      <div class="unshrinkable">Elementum sagittis vitae et leo duis</div>
    </div>
 ...

CSS

* {
  min-height: 0px;
}

html,
body {
  position: absolute;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 300px;
}

body {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow-y: auto;
}

.minimizable-group {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow-y: hidden;
}

.minimizable-group-title {
  flex: none;
}

.minimizable-group-content {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: min-content !important;
}

.unshrinkable {
  flex: none;
  min-height: max-content !important;
}

.shrinkable {
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: 1em;
}


/*********************************/
/*    IRRELEVANT STUFF BELOW     */

.minimizable-group-title {
  cursor: pointer;
  color: #aaa;
  background-color: #333;
  font-weight: bold;
}

.minimizable-group-title::before {
  content: '⮟ ';
}

.minimizable-group-title.minimized::before {
  content: '➤ ';
}

.minimizable-group-content.minimized {
  max-height: 0px;
  visibility: hidden;
}

.unshrinkable {
  background-color: #ffcccb;
}

.shrinkable {
  background-color: #add8e6;
}

JavaScript

Array.from(document.getElementsByClassName("minimizable-group")).forEach((element) => {
  element.children[0].addEventListener('click', () => {
    element.children[0].classList.toggle('minimized');
    element.children[1].classList.toggle('minimized');
  });
});