min-width: 0 helps the flex element to shrink

Useful to know

In flex elements, the automatic min-width can be based on the minimum content size. Therefore, a long undivided text sometimes prevents a column from shrinking into the available space. [1]

Example: .card-content { min-width: 0; }. This permits a smaller width of the flex element itself. It does not decide on its own what to do with the text inside: a carryover or an ellipsis may be needed according to the design. Check a long URL and a multi-character title, not just the short demo caption.