flex-grow not working in column layout

Question

I am trying to have the views-cntnr take up any space not used by views-cntnr and menubar divs. To achieve this, I have a flex display

Answer 1

Everything in your code is working fine.

The only issue is that your flex container has no specified height. Therefore, the height resolves to auto, meaning the height of the content.

The flex-grow property distributes free space in the container. With no free space in your container, flex-grow has nothing to do.

Try this adjustment to your CSS:

.analysis {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

This tells the flex container to be the height of the viewport. Now the height of the container is taller than the height of the content, and you will notice flex-grow doing its work.

Revised Fiddle

Learn more about the height: auto default on most elements.