JSFiddle - React, Tailwind, and code Playground

by gergana

HTML

<div class="wrapper">
  <div class="top">
    Top
  </div>
  <div class="middle">
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    <p>
     Test
    </p>
    
  </div>
  <div class="bottom">
    <p>
    some content
    </p>
  </div>
</div>

CSS

.wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}

.top {
	height: 10px;
	background: yellow;
}

.bottom {
	background: gray;
}

.middle {
	background: red;
	width: 100%;
	height: 100%;
}