JSFiddle - React, Tailwind, and code Playground

HTML

<div class=buggedFix>
  <div class=parent>
    <div class=first>This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. </div>
    <div class=second>
      <div class=big>parent max-height is ignored!</div>
    </div>
    <div class=third>This is OK. This is OK. This is OK. This is OK.</div>
  </div>
</div>

CSS

.buggedFix {
  display: flex;
}

.parent {
  display: flex;
  flex-direction: column;
  width: 250px;
  max-height: 200px;
}

.first {
  background: pink;
  flex: 0 0 auto;               /*  changed  */
}

.third {
  background: yellow;
  flex: 0 0 auto;               /*  changed  */
}

.second {
  background: brown;
  flex: 1 1 auto;
  overflow: auto
}

.big {
  background: red;
  height: 600px;
  margin: 10px
}