JSFiddle - React, Tailwind, and code Playground

HTML

<section id="container" >
    <header id="header" >This is a header</header>
    <section id="content">
      <aside>
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
      </aside>
      <article id="article" >
        <div>               
          This is the content that
          <br />
          With a lot of lines.
          <br />
          With a lot of lines.
          <br />
          This is the content that
          <br />
          With a lot of lines.
          <br />
          <br />
          This is the content that
          <br />
          With a lot of lines.
          <br />
          <br />
          This is the content that
          <br />
          With a lot of lines.
          <br />
        </div>
        <footer id="footer" >This is a page footer</footer>      
      </article>
    </section>
    <footer id="footer" >This is a footer</footer>
</section>

CSS

html, body {
    height: 100%;    
}
#container {
    display: flex;
    flex-direction: column;
    height: 100%;
    
    width: 50%;
    background-color: red;
}

#container header {
    background-color: gray;
}
#container section {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
#container footer {
    background-color: gray;
}
aside {
  width : 100px;
  background-color: blue;
  //overflow-y: auto; 
  min-height: content;
}
article{
  //overflow-y: auto; 
  width: 100%;
  display:flex;
  flex-direction: column;
}
article > div{
  flex: 1 1 auto;
}

#content {
  display:flex;   
}