Sean Sean - 1 year ago 242
CSS Question

Make flex element ignore child element

Is it possible to make a flex element ignore a child element so it's size does not affect the other elements?

For example, I have a wrapper with

display: flex
. It has a header, content, and footer.

<div class="wrapper">

I want the wrapper to ignore the header tag (the header will be fixed to the top of the window). The article will be set to
flex: 1
so it takes up the rest of the space, forcing the footer to the bottom of the page. Here is some sample CSS:

.wrapper {
display: flex;
flex-direction: column;
height: 100%;
padding-top: 50px; /* Accounts for header */

header {
height: 50px;
position: fixed;
top: 0;
width: 100%;

article {
flex: 1;

footer {
height: 50px;

I know I could just move the header outside of the wrapper but I have a lot of existing code that will make that a bit more difficult. Is what I am asking even possible?

Answer Source

When you declare .wrapper as display:flex you automatically implicitly declare all its direct child elements to be display:flex-item. You can override the implicit declaration with something as simple as header { display: block; }

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download