How can I prevent a flex item from overflowing its parent container in a responsive WordPress layout?

I'm working on a custom WordPress theme and using Flexbox to build a responsive layout. One of my flex items (e.g., a card or sidebar element) is overflowing its parent container on smaller screens, even though I'm using flex-wrap: wrap and setting max-width values.

Here's a simplified version of the CSS:

.container {  display: flex;  flex-wrap: wrap;}.item {  flex: 1 1 300px;  max-width: 100%;}

Despite this setup, the .item sometimes breaks the container width, especially when nested inside WordPress blocks or when a large image or long word is inside it.

What’s the best approach to make sure the flex item always stays inside the container on all screen sizes, especially in dynamic WordPress environments?

Things I've tried:

Adding overflow: hidden or auto

Setting min-width: 0

Wrapping inside another div with width: 100%

Still no consistent results.

Any ideas or best practices for solving this in a WordPress context?

Thanks in advance!