JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer_container">
  <div id="outer1">
    <h2>Outer 1</h2>
  </div>  
  
  <section id="container" >
      <header id="header" >This is a header</header>
      <article id="content" >
          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 />
      </article>
      <footer id="footer" >This is a footer</footer>
  </section>


<div id="outer2">
    <h2>Outer 2</h2>
  </div>   
 </div>

CSS

html, body {
    //height: 100%;    
}

#outer_container{
    display:flex;
    flex-direction:row;
    top:0;
    bottom:0;
    position:fixed;
}


#outer2{
  flex: 1 0 auto;
}



#outer2{
  flex: 1 0 auto;
}


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

#container header {
    background-color: gray;
}
#container article {
    flex: 1 1 auto;
    overflow-y: auto;
   // height: 0px;
}
#container footer {
    background-color: gray;
}