If you look at the image. the current home page has div A and div C showing when you land on it. when you change the value in a drop box, b is added to the flex container. adding b pushes C out of the flex container causing it to overlap. I don't understand what I'm doing wrong. I would like to keep all 3 divs within the flex container. What can I try next?
Update
I believe I found the root cause of the issue. Say the container has 2 divs in it and the height is 300. If I add a 3rd div, the height becomes 320. I have to stop the height from changing because another div is added. I want the 3rd div to squeeze into the 300. How do I stop the 3rd div from changing the height of the container?
<div id="flex-container" style="display: flex; flex-direction: column"><div id=" a " style="flex-grow:1 "></div><div id="b " style="flex-grow: 1 "></div><div id="c " style="flex-grow: 1 "></div></div>