JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<section id="container" >
    <header id="header" >This is a header</header>
    <article id="content" >
        1 This is the content that
        <br />
        2 With a lot of lines.
        <br />
        3 With a lot of lines.
        <br />
        4 This is the content that
        <br />
        5 With a lot of lines.
        <br />
        <br />
        6 This is the content that
        <br />
        7 With a lot of lines.
        <br />
        <br />
        8 This is the content that
        <br />
        9 With a lot of lines.
        <br />
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

CSS

* {box-sizing:border-box} /* Reset Boxmodel */
html, body {
  height: 100%;    
}
#container {
  display: flex;
  flex-direction: column;
  height: 100%;    
  width: 50%;
  background-color: red;
}
#container header,
#container article, 
#container footer {
	padding:.75rem .5rem;
}
#container header,
#container footer {
  background-color: gray;
}
#container article {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 100px;
	background:yellow; /* um mögliche Überlappung gegenüber #container zu erkennen */
}