JSFiddle - React, Tailwind, and code Playground

by oakley808

HTML

<div class="wrapper">
                  <div class="sub-wrapper">
                      <header>header</header>
                      <div class="content">
                          lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.<br>
                          lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
                          <br>
                          lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.<br>lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.<br>
                          lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.<br>lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
                          <br>
                          lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.<br>lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi,...

CSS

.wrapper {
  padding: 10px;
  position: fixed;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  background: #dadada;
  overflow: scroll;
}
.sub-wrapper {
  background: white;
  padding: 10px;
  max-height: 100%;
  display:table;
}
header {
  height: 50px;
  background: lightblue;
  display:table-row;
}
.content {
  background: gold;
  display:table-row;
}