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 1 auto;}
.third{background:yellow;flex: 0 1 auto;}
.second{background:brown;flex: 1 1 auto;overflow: auto}
.big{background:red;height:600px;margin:10px}