JSFiddle - React, Tailwind, and code Playground

HTML

<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 />
        <br />
        This is the content that
        This is the content that
        <br />
        <br />
        <br />
        This is the content that        
        <br />
        With a lot of lines.123
        <br /> <br />
        This is the content that        
        <br />
        With a lot of lines.123
        <br /> <br />
        This is the content that        
        <br />
        With a lot of lines.123
        <br /> <br />
        This is the content that        
        <br />
         <br />
        This is the content that        
        <br />
        With a lot of lines.123
        <br /> <br />
        This is the content that        
        <br />
        With a lot of lines.123
        <br /> <br />
        This is the content that        
        <br />
        With a lot of lines.123
        <br />
        With a lot of lines.123
        <br />
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

CSS

html, body {
    height: 100%;    
}

#content {height: 100%; overflow: auto;}

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

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