Can flexbox detect when a flex item wraps?
No.
In CSS, once the browser renders the page on the initial cascade, it doesn’t reflow the document when an element wraps. As a result, parent elements don’t know when their children wrap.
That’s why containers don’t shrink-to-fit their content after wrapping.
That’s why you need media queries or JavaScript.
Here are some more details:
- Make container shrink-to-fit child elements as they wrap
- How to center a flex container but left-align flex items