This is a fairly common request in my office: slide in animated drawers with fixed headers and scrollable bodies. Also, the content in the headers is constantly changing so both the body and header heights need to adapt.

Before flexbox, this was kind of a nightmare. Absolute positioning doesn’t play particularly nice with transforms. Multiple classes to set multiple heights seems like overkill. So does using JavaScript just to get this layout.

But with flexbox, it can be done in basically four lines (eight with prefixes). Use a flexbox column display for the drawer itself:

.drawer {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

And set the drawer body to grow and scroll:

.drawer-body {
    -webkit-box-flex: 2;
    flex-grow: 2;
    overflow-y: auto;
}

That’s all it takes. Here’s a Pen that also includes the code for animating on and off the page.

See the Pen Animated Drawer with Fixed, Variable Height Header by Lauren Ashpole (@laurenashpole) on CodePen.