JSFiddle - React, Tailwind, and code Playground

by steelraiden

HTML

<div style="width:100px;height:100px;  display: flex;flex-direction: column;">

<div class="top">
	<h1>Title</h1>
</div>
<div class="content">
	<div class="inner">
	content
  <br />
	content
  <br />
	content
  <br />
	content
  <br />
	content
  <br />
	</div>
</div>
</div>

CSS

/**
 * Vertical fill remaining area with flexbox.
 */

.top {
	background: blue;
  overflow:hidden;
  height:31px;
}
.content {
	background: red;
	flex: 1;
	background: gray;
	height: 100%;
  overflow:hidden;
}