Prevent flex items from overflowing a container

Question

How do I make my flex item (article in this example), which has flex-grow: 1; not to overflow it\'s flex parent/container (main<

Answer 1

It's not suitable for every situation, because not all items can have a non-proportional maximum, but slapping a good ol' max-width on the offending element/container can put it back in line.