JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 
<div id="wrapper">
    
    <div id="middle">  <!-- все пространство от хедера до футера-->
        <div id="container">
            <div id="content">
                
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                                text text text text text text text text text text text text text text text text
                           ...

CSS

html {
 height: 100%;
 }
 body { 
          height: 100%;
         }
* {
        padding:0;
        margin:0;
}
#wrapper {
    min-width: 1000px;
    min-height: 100%;
        background: #f00;
}

/* Middle
—————————————*/
#middle {
    border-left: 250px solid #B5E3FF;
    border-right: 250px solid #FFACAA;
    
    position: relative;
    background: #988780;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
    margin-right: -100%;
}
#content {
    padding: 0 20px;
}
/* Footer
—————————————*/
#footer {
    clear: both;        
    height: 100px;
    background: #BFF08E;
}