JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, et, facilis. Id incidunt aut perferendis, minima maiores obcaecati animi voluptas, suscipit. Adipisci assumenda similique ex, quaerat! Cum praesentium minus necessitatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis nihil odit ducimus quis amet recusandae magni consectetur eius error quisquam eum nesciunt vel unde non suscipit et, voluptate officiis voluptatem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ea ad velit, at quasi suscipit in itaque assumenda inventore minima dolore saepe quam soluta nostrum repudiandae dolores modi, nam culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur similique debitis, animi, iste culpa, pariatur obcaecati distinctio et illum optio libero eligendi accusamus, provident temporibus dolores. Et dolorem, adipisci delectus.
  </div>
</div>
<footer>já jsem footer</footer>

CSS

html, 
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow-y: scroll;
  
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* při column: osa X */
  align-items: center; /* při column: osa Y */
}

.wrapper {
  background: green;
  
  
  align-self: stretch; /* pokud potřebuji full-width pozadí/obsah i na wrapperu */
  
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* při column: osa Y */
  align-items: center; /* při column: osa X */
  
  flex: 1 0 auto; /* toto řekne že se .wrapper bude roztahovat jak jen to jde */
}

.content {
  width: 500px;
  background: blue;
  
  flex: 1 0 auto;  /* stejně jako výše */
}

footer {
  align-self: stretch;
  background: red;
}