i just started a new site and ran into a problem.
I’m trying to make a column (literal) Responsive for all viewport heights. It’s an SVG and I split it into three parts:
-
the capital (top - fixed size),
-
staff (middle section - which should be the one to grow or shrink depending on the viewport height)
-
and the base (bottom - fixed size)
I used a vertical flexbox to join all the parts together, set its height to 100% of the viewport and set the top and bottom parts to not grow or shrink in the flex child settings. i set the middle section height to auto hoping it would shrink or grow to occupy the remaining space in the flexbox but it doesn’t seem to work and just grows out of the flexbox. Please can someone tell me how to fix this or a workaround?