JSFiddle - React, Tailwind, and code Playground

HTML

<p>A, B, C are all flex columns.</p>
<p>In Chrome, B's height is limited by its parent A.</p>
<p>In Firefox, B's height is expanded by its child C.</p>
<a>
  A (height: 100px)
  <b>
    B (height: auto)
    <c>
      C (height: 200px)
    </c>
  </b>
</a>

CSS

a, b, c {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

a {
  background-color: red;
  height: 150px;
}

b {
  background-color: orange;
  height: auto;
}

c {
  background-color: yellow;
  height: 200px;
}