JSFiddle - React, Tailwind, and code Playground

by Tianyun Ling

HTML

<div style="height: 600px; width: 600px; ">

	<div style="width: 50%; height: 100%; float:left;">
		<div  style=" display: flex;flex-flow: column; height: 100%;">
		
			<div style="border: 1px solid black;  flex: 0 1 50px; min-height: 50px;" >
				1： fixed height 50px;
			</div>

			<div style=" border: 1px solid black;  flex: 1 1 auto; overflow-y:scroll;">
				regular text works<br/>
				regular text works<br/>
				regular text works<br/>
				regular text works<br/>
				regular text works<br/>
				regular text works<br/>
			</div>
			
			<div style="border: 1px solid black; flex: 0 1 150px; min-height: 150px; ">
				3： fixed height 150px;
			</div>
		</div>
	</div>


	<div style="width: 50%; height: 100%; float:left;">
		<div  style=" display: flex;flex-flow: column; height: 100%;">
		
			<div style="border: 1px solid black; flex: 0 1 50px; min-height: 50px;" >
				1： fixed height 50px;
			</div>

			<div style="border: 1px solid black; flex: 1 1 auto; overflow-y:scroll;">
				<textarea placeholder="textarea won't fill 100% height in Chrome" style="width: 100%;  height: 100%; "></textarea>
			</div>
			
			<div style=" border: 1px solid black;flex: 0 1 150px; min-height: 150px; ">
				3： fixed height 150px;
			</div>
		</div>
	</div>