JSFiddle - React, Tailwind, and code Playground

by Slava Fomin II

HTML

<div class="container">
  <div class="header"></div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus quam vel ante porttitor finibus. Sed luctus tristique metus eget porttitor. Integer bibendum nec augue ut ullamcorper. Nam vel pulvinar lectus. Vivamus lectus ex, ultrices a tempus sit amet, rutrum in odio. Vestibulum mollis imperdiet sagittis. In non urna a erat gravida fringilla non sed neque.

Nulla sed risus a lectus convallis euismod eget non dui. Vivamus felis tellus, placerat gravida turpis id, dignissim placerat orci. Vivamus venenatis dapibus augue, sed mollis felis efficitur a. Suspendisse cursus, lectus sed rhoncus rutrum, nibh velit rhoncus nibh, nec sagittis risus risus vitae urna. Mauris vitae turpis eget ipsum molestie molestie. Ut facilisis dictum tincidunt. Etiam nec tortor sit amet tortor dapibus tristique. Donec venenatis tellus non mattis tincidunt. Sed ac lectus eros. In vitae ex odio. Vivamus vel tempus arcu. Aenean lacus erat, tempor a tempus posuere, ultricies a nulla. Duis tempor nulla sit amet felis dignissim euismod. Aliquam feugiat augue ac nibh placerat porttitor.

Nunc varius libero ac fermentum ornare. Donec tincidunt neque a feugiat porttitor. Donec non lectus eros. Suspendisse ex orci, porttitor in feugiat et, sollicitudin eu diam. Etiam ultrices ullamcorper nunc ac ultricies. Ut fringilla, ligula ut pharetra pretium, massa dui condimentum sapien, at venenatis nisi magna non arcu. In hac habitasse platea dictumst. Vestibulum sit amet tempus risus. Sed placerat feugiat ipsum, quis mattis ante venenatis quis. Cras ut pellentesque metus, a tristique risus. Nullam eleifend dignissim hendrerit.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse blandit turpis a libero ornare, sed iaculis velit feugiat. Phasellus malesuada quam non augue consectetur, non ornare nulla mattis. Fusce eget ligula vitae nibh luctus porttitor. Integer aliquam...

CSS

html, body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  border: 2px solid red;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: column;
  
}

.header {
  height: 50px;
  background-color: blue;
  flex-shrink: 0;
}

.content {
  overflow-y: scroll;
  flex: 1 1 0;
}