JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id ="shrink-fix">
<label for="shrink-fix">Toggle the <code>flex-shrink</code> value of the nested flex container</label>
<br>
<input type="radio" name="min-height" id ="min-height2-fix" checked>
<label for="min-height2-fix">Set no <code>min-height</code> to the nested flex container (should default to <code>auto</code>)</label>
<br>
<input type="radio" name="min-height" id ="min-height0-fix">
<label for="min-height0-fix">Set <code>min-height:0</code> to the nested flex container</label>
<br>
<input type="radio" name="min-height" id ="min-height1-fix">
<label for="min-height1-fix">Set <code>min-height:min-content</code> to the nested flex container</label>
<div class="outer">
   <div class="flex">
      <div class="inner">
        <p>The container of these two columns (<code>.flex</code>) must always be as tall as its container (<code>.outer</code>), whatever tall it is, and that container should be scrolling if one of the columns overflows it. So <code>.outer</code> is a column-oriented flex container with <code>overflow:auto</code>, and <code>.flex</code> has <code>flex-grow:1</code> (and default <code>flex-shrink:1</code> and <code>flex-basis:auto</code>).</p>
        <p>The <code>flex-shrink: 1</code> declaration should try shrink the <code>.flex</code> container to the inner height of <code>.outer</code>, but not smaller than its <code>min-height</code>. Since the <code>.flex</code> itself has the default <code>overflow:visible</code>, its initial <code>min-height:auto</code> should be its <a href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto" target="_blank">automatic minimum size</a> (i.e. the content height, like with <code>min-height:min-content</code>). However, in Chrome and Safari, it behaves as <code>min-height:0</code> (you can compare the behaviors by swiching different radio options and resizing the browser).</p>
        <p>Setting <code>flex-shrink: 0</code> disables shrinking below <code>flex-basis</code>, so...

CSS

.outer {
  height: 70vh;
  display: flex; /* to make the nested flex container always fill the height of this one */
  flex-direction: column;
  overflow: auto;
  margin-top: 1em;
  border: 2px solid #696;
}

.flex {
  display: flex;
  flex-direction: row;
  border: 2px solid #888;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.inner {
  flex: 1;
  margin: 5px;
  background: #ccc;
}

#shrink-fix:checked ~ .outer > .flex {
  flex-shrink: 0;
}

#min-height0-fix:checked ~ .outer > .flex {
  min-height: 0;
}

#min-height1-fix:checked ~ .outer > .flex {
  min-height: min-content;
}