Height Of Flex Items Not Remaining Fixed

I have a page with three rows from top to bottom, fix height header(100px) at the top and fix height footer(100px) at the bottom, the middle take up the rest height. demo is here:

Solution 1:

An initial setting of a flex container is flex-shrink: 1. That means that flex items can shrink from their initial size in order to remain inside the container (i.e., they cannot overflow).

That's what is happening in your code. The header and footer are shrinking to accommodate the height of the content in the middle item.

You need to disable flex-shrink.

Instead of this:

#header {
    height: 100px;
    flex-grow: 0;
    background: pink;
}

#footer {
    height: 100px;
    flex-grow: 0;
    background: lightblue;
}

Try this:

#header {
    height: 100px;
    flex-grow: 0;
    flex-shrink: 0;
    background: pink;
}

#footer {
    height: 100px;
    flex-grow: 0; /* not really necessary; default is 0 */flex-shrink: 0;
    background: lightblue;
}

Or even better (in terms of efficiency), this:

#header {
    flex: 00100px; /* flex-grow, flex-shrink, flex-basis */background: pink;
}

#footer {
    flex: 00100px;
    background: lightblue;
}

Solution 2:

you can achieve that using min-height in header and footer like this:

#header {
    background: pink;
    height: 100px;
    flex-grow: 0;
    min-height: 100px;
}

#footer {
    background: lightblue;
    height: 100px;
    flex-grow: 0;
    min-height: 100px;
}