JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div class="container">
  <div class="flex">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in feugiat ligula. Ut sodales, ex a aliquam condimentum, neque ante rutrum nibh, ac feugiat urna turpis id arcu. Morbi erat metus, laoreet sit amet sollicitudin in, porttitor in dolor. Etiam luctus tortor in est sodales, et vehicula est porttitor. Donec euismod sed nibh nec finibus. Nam sagittis neque vitae fermentum fringilla. Sed feugiat ultricies augue eget euismod. Curabitur eget maximus eros.

Proin vel feugiat elit. Cras pulvinar metus sit amet felis sodales, vitae auctor orci imperdiet. Ut tincidunt quam a nisl dictum, sed venenatis mi iaculis. Suspendisse vel dictum neque, at molestie odio. Vivamus orci augue, vulputate eget leo sed, porttitor tempor orci. Proin ut tempor neque. Aliquam tempor pretium ante sed malesuada. Donec suscipit et diam et consectetur. Phasellus consequat est ut mi tempor, vel suscipit neque aliquet.

Phasellus eu pellentesque nisl. Fusce pharetra massa sit amet lorem varius ornare. Quisque libero eros, scelerisque eget ipsum sit amet, pretium condimentum est. Vivamus tincidunt ligula non nisl molestie rhoncus. Mauris bibendum vehicula ipsum eget pellentesque. Sed eu ex sed nunc maximus scelerisque et quis felis. Nunc aliquam nibh eget turpis cursus consectetur. Donec orci ligula, facilisis quis mattis sit amet, finibus ac urna.

Mauris tempor eleifend elit. Proin ornare tellus eget sollicitudin rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus sagittis gravida libero, nec consequat justo semper id. Fusce vulputate magna id quam facilisis consectetur. Vestibulum in mollis metus. Vestibulum ultrices ut ligula consequat sollicitudin. Fusce convallis velit et massa eleifend, non lobortis ipsum sollicitudin. Praesent pellentesque, arcu sed dapibus tincidunt, orci augue interdum orci, et pharetra dolor ipsum rutrum ligula. Maecenas nec...

CSS

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

div {
  padding: 1em;
}

.container {
  background: red;
  height: 100%;
  
  display: flex;
  flex-direction: column;
}

.flex {
  background: yellow;
  
  flex: 1 1 0;
  flex-shrink: 0;
  min-height: 0;
}

.content {
  background: blue;
}

.footer {
  background: lime;
}