Responsive divs without using flexbox <p>I'm working on a chat interface at the moment and currently have the viewport height to 100vh, with a header/navbar, a "main content" section, and the footer where the input field is located - (see fiddle <a href="http://jsfiddle.net/2L8q3r5h/15/" rel="nofollow">here</a>)</p> <p>The way I have it currently coded has the "main" section receive content from the AJAX calls made via the input field in the footer. Once enough messages are added in, only this section will become scrollable as to having the entire page become scrollable. </p> <p>My question is concerning how I could replicate this feature to make it function the same way in older legacy browsers, while still maintain the ability to have the chat section take up the remaining space between the header and footer without affecting the viewport height. My css for the chat section utilizes flexbox and currently looks like this:</p> <pre><code>.chat-section { -ms-flex: 1; -moz-flex: 1; -o-flex: 1; -webkit-flex: 1; flex: 1; background-color: #f8f8f8; border-top: 1px solid #A8A8AC; border-bottom: 1px solid #A8A8AC; overflow-y: scroll; overflow-x: hidden; } </code></pre>