min-width rendering differently in flex-direction: row and flex-direction: column

Question

I have a container with display: flex and flex-direction: row.

In that container there is a sub-container also with display: flex

Answer 1

Generally speaking, flex items, by default, cannot be smaller than the size of their content.

More specifically, these are initial settings of flex items:

• min-width: auto (applies in flex-direction: row)
• min-height: auto (applies in flex-direction: column)

Even more specifically, take a look at the spec language:

4.5. Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

auto

On a flex item whose overflow is visible in the main axis, when specified on the flex item's main-axis min-size property, specifies an automatic minimum size. It otherwise computes to 0.

In other words, the minimum sizing algorithm applies only on the main axis.

Your input elements in column-direction containers don't get min-width: auto – because the main axis is vertical in those cases – so they shrink and won't overflow the container. You can see this behavior play out on your second input element. Reduce the screen size while viewing this demo.

The same thing happens with the third input, which is a child of a nested flex container with flex-direction: column... EXCEPT, this column-direction container is also a flex item of larger container with flex-direction: row.

This means the main axis of the nested container is horizontal and min-width: auto applies. As a result, this flex item will not shrink below the intrinsic width of the input. For an illustration, see the same demo from above.

Therefore, you need to override this default with min-width: 0 or overflow: hidden (demo).

And for the reasons explained above, the fourth input, contained in a nested row-direction flex container, will also need to have min-width: auto overridden (demo).

Related: Why doesn't flex item shrink past content size?