Flex items not shrinking when window gets smaller [duplicate]

An initial setting on flex items is min-width: auto. This means that a flex item cannot, by default, be smaller than its content.

You can override this setting with min-width: 0 or overflow with any value other than visible. Add this to your code:

.plot-col {
    min-width: 0;
}

Revised Fiddle

More info: Why don’t flex items shrink past content size?


The reason for this setting is explained here: w3.org/TR/css-flexbox-1/#min-size-auto).

Leave a Comment