Similar to [[20200314212525-grid-blowouts]], it's possible to have flex items not shrink properly.
This most often occurs with long unbroken strings, or due to the nesting of your DOM.
To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.
Frustratingly, this can also happen when using [[20221219123110-intrinsic-sizes]], which seem to calculate differently.
There's two main solutions to this, both applied to the item that won't shrink enough - applying min-width: 0, or overflow: hidden.
https://defensivecss.dev/tip/flexbox-min-content-size/ https://gaurav5430.medium.com/css-flex-positioning-gotchas-child-expands-to-more-than-the-width-allowed-by-the-parent-799c37428dd6