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).