Flexbox stretching

I spent way more time than I should have on this. I'm taking it philosophically though. I now have a better understanding on Flexbox and cross-axis stretching.

Problem

I've got a form buried in one of the settings of Meet on V.

As you can see there's a pretty standard layout. Menu on top, menu on left and right. The content in the center takes up the rest of the space.

As it's a web app, we don't scroll on the window, we scroll on the content within. Simple right? 😀

Structure

There's two flexboxes handling the layout. A column one splitting the top nav and the rest of the page, then regular flexbox going left to right. The first and third are fixed width and the center takes up the rest of the space.

Now the main content stretches beyond the screen so how do you contain that within the parent flexbox?

As it was built, I was having overflow issues causing scrolling on the entire window. I first tried to find the offending element, but that wasn't fruitful. Elements should be displayed at their size.

Solution

The solution was to use align-items: stretch; combined with a min-height: 0. Basically, the size of a flex item is determined by the cross axis. To change how the cross-axis is sized, you use align-items.

Now that will make the item stretch, but stretch using auto which is the same result we had before. We have to apply an arbitrary height to it. The height isn't used, but it does force flexbox to compute the size differently.

Useful links

• Cheat Sheet
• Stack Overflow

I vaguely remember Adam Wathan talking about this somewhere. Couldn't find a reference.

Key takeaways

• You need to have a good understanding of the Main axis and Cross axis
• The way flexbox calculates size sometimes requires an initial height