Flexbox Width Overflow

Issue Description

A flex container with multiple child elements has an overflow issue.

Further Detail

Say you have a flex container and 3 child elements. The first child is fixed with and has flex-grow: 0; and flex-shrink: 0; on it.

The last child also has grow and shrink 0 but has a width defined by the contents.

The middle element needs to grow and shrink between between the first and last child, but it’s contents are wider than the available space, thus overflowing the content outside of the parent container.

How to Fix the Issue

An incredibly simple solution, actually!

The middle element, using the example above, requires max-width: 0; applying to it.

This fixes the issue because, as a child flex element, the browser automatically assigns a minimum width to each element of it’s contents. If the content is too wide to be shrank, it just won’t do it.

Adding the max-width of 0 overwrites this behaviour and fixes the overflow issue.

Fixed Code Snippets

max-width: 0;

References