I have a div that contains a variable number of elements that should scroll when content overflows the remaining height of the screen, but when the content grows to require a scroll, the height of the div expands by the exact height of the page's header. I assume this has something to do with my height/flex settings, but I'm having trouble figuring out how to prevent it from growing.
Here is the pen for the page configuration when the content does not overflow, and here is the pen when the content does overflow.
What should I change to prevent the overflowing content from expanding the height of the div to 100% of its parent, and instead use 100% of its parent minus the header height?
For reference, the size of the header size is determined by the content contained within, not a fixed height as in the pen.
html,body { height: 100%; width: 100%; margin: 0; padding: 0;}.container { display: flex; flex-direction: column; height: 100%;}.header { width: 100%; height: 100px; background-color: blue; display: flex;}.column-container { display: flex; flex-direction: row; background-color: red; flex: 1 1 auto; height: 100%;}.column { display: flex; flex-direction: column; width: 50%;}#col-a { background-color: green;}#col-b { background-color: orange;}.spacer { padding-top: 0px; // Note, change this to force overflow}.scroll-area { display: flex; flex-direction: column; overflow: auto;}<div class="container"><div class="header"><p>Header</p></div><div class="column-container"><div class="column" id="col-a"><p>Column A</p><div class="scroll-area"><p>Scroll Area</p><p class="spacer">End</p></div></div><div class="column" id="col-b"><p>Column B</p></div></div></div>