JSFiddle - React, Tailwind, and code Playground

by Max Poshusta

HTML

<div class="container">
  <div class="sidebar">
      This is some text that overflows outside of the container, but in a more complex world this is perfectly acceptible. However, the footer should bump down to be below this overlowing text - the footer should be at the very bottom... 
      
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sem ut urna suscipit dapibus ut et orci. Nunc laoreet ornare nunc vel imperdiet. Curabitur consectetur tempor magna, et convallis lacus rhoncus in. Etiam sagittis tempus lacus. Donec accumsan quam aliquam massa aliquet, a varius sapien luctus. Sed magna dui, sagittis ac consectetur et, pretium vel enim. Nullam in metus dignissim, bibendum urna in, sollicitudin dui. Donec vestibulum tellus sed diam lobortis posuere. Integer dictum est sed ante ultricies, nec tristique ante congue.
  </div>
  
  <div class="footer">
    <div>
        I'm a footer that should be at the bottom below this text, but I'm not
    </div>
  </div>
</div>

CSS

.container {
  position: absolute;
  height: 100%;
  width: 100%;
}

.sidebar {  
  overflow: visible;
  height: 175px;
  width: 200px;
}

.footer { 
  position: absolute;
  height: 200px;
  width: 100%;
  margin-top: 22em;
}













/* Not important to the problem statement styles */
.sidebar {
  background-color: lightgrey;
  border: 1px solid grey;
  padding: 0.5em;
  word-wrap: break-word;
}

.footer {
  background-color: cyan;
}

.footer div {
  width: 100%; 
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}