DevTools Tips

Understand flexbox item sizing

Categories: Supported by:

Flexbox is a great way to easily distribute elements and empty space in a row or a column, and create interesting layouts.

It only takes a couple of CSS properties to create nice layouts that automatically adapt to the available space.

But, all of this power also means that the complexity that the browser engine deals with is hidden from you, the developer. While this is, in general, fine, it tends to become an issue when your flexbox layout isn't doing the things you want it to do.

If you've ever used flexbox, there might have been times when you've wondered: why is this element this big?, or why is this element not growing to fill that gap?

Firefox has a wonderful tool that can help with this.

  1. Right-click on the flexbox item that you're interested in and select Inspect.
  2. DevTools opens up, and the Inspector tool is displayed, with the corresponding element selected.
  3. Click Layout in the Inspector sidebar.

You now have a diagram that represents the size of the flex item, with some annotations that might be useful for understanding why this particular item has been sized this way.

Here is the information that might be displayed:

Firefox, with the DevTools Inspector tool opened, showing the Layout sidebar that contains the flex item diagram