I'm designing a little modal to allow me to select a bunch of filter criteria. I have several filtering categories which I want to present separately. Here's the design intent:

In this example, the Groups and Locations categories are being allocated all remaining space. What I assumed flex-grow: 1; should achieve. This is what I want to get.

However, What I currently have is this. Work in progress so no judgement. Ugly borders in to aid debug... And note, in this version, I was actually attempting to make all categories occupy an equal portion of the remaining space. So, slightly different to the above image. Can anyone help me figure out how to get flexbox behave the way I want it to / and kind of expect it to!

The relevant code is:

<div class="modal-wrapper">

<!-- Title and close icon-->
  <div class="show-only-title">
    <span>Show Only</span>
    <ion-icon slot="end" src="svg/chevron-up.svg"></ion-icon>
  </div>

  <div class="categories-container">
    <!-- categories -->
    @for (category of options().categoryArray; track category.categoryName) {
      <div class="category-wrapper">

        <!-- Category Header -->
        <div class="category-header">
          <span>{{ category.categoryName }}</span>
          <span>Clear</span>
          </div>

        <!-- Values Container -->
        <div class="category-values">
          @for (value of category.values; track value.name) {
            <div class="value-item">
              {{ value.name }}

              @if(value.icon) {
                <ion-icon slot="end" src="{{value.icon}}"></ion-icon>
              }
            </div>
          }
        </div>
      </div>
    }
  </div>

<!-- Buttons -->
  <div class="buttons">
    <!-- Cancel -->
    <monkey-button class="cancelButton"
      [monkeyInput]="cancelButtonConfig()"
      (clicker)="onCancel()"
    ></monkey-button>
    <!-- Confirm -->
    <monkey-button class="submitButton"
      [monkeyInput]="submitButtonConfig()"
      (clicker)="onSubmit()"
    ></monkey-button>
  </div>
</div>

and

:host {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-wrapper {
  display: flex;
  flex-direction: column;
  border: red 1px solid;
  width: 100%;
  height: 60vh;  // Fixed height for the modal
  padding: 15px 20px 20px 20px;
  border-radius: 20px;
}

.categories-container {
  border: yellow 5px solid;
  flex-grow: 1;  // Make it take all remaining space, but it shouldn't exceed parent height
  // min-width: 0;
  display: flex;
  flex-direction: column;
}

.category-wrapper {
  border: red 1px solid;
  flex: 1;
  overflow-y: auto;
  // display: flex;
  // flex-direction: column;
  // padding: 10px;
  border-bottom: 1px solid var(--light-gray);
}