JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
		<div id="child">
			<div id="child_1"> &nbsp;</div>
			<div id="child_2">Content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
			</div>
		</div>
		<div id="child2"> &nbsp;</div>
	</div>

CSS

html { height: 100%; }
body { min-height: 100%; }
#parent { width: 50px; heigh: 1px; min-height: 100%; }
#child { width: 50px; heigh: 1px; min-height: 80%; background-color: blue; }
#child_1 { height: 50%; background-color: black; }
#child_2 { min-height: 50%;  background-color: pink; }
#child2 { width: 50px; min-height: 20%;  background-color: orange; }