Unexpected Text Overflow in CSS Flexbox Layout with Long Words on Mobile
I'm having a hard time understanding I'm working with an scenario with text overflowing in my flexbox layout on mobile devices... I'm using a simple flexbox container to align a title and a description side by side. The question arises when the description contains long words without spaces, causing it to overflow outside its container instead of wrapping correctly. My flexbox setup looks like this: ```css .container { display: flex; flex-direction: row; justify-content: space-between; max-width: 100%; } .title { flex: 1; margin-right: 10px; } .description { flex: 2; overflow-wrap: break-word; } ``` On mobile devices, particularly in Chrome on Android, the description continues to overflow, which is frustrating. I've tried adding `overflow: hidden;` and `text-overflow: ellipsis;`, but those just cut off the text without allowing it to wrap. I also set `word-wrap: break-word;`, but nothing seems to fix it. The description text sometimes looks like this: `ThisIsAnExampleOfAVeryLongWordThatShouldBreakButDoesNot`. I've checked the CSS specifications, and I believe I'm using the right properties. Can anyone suggest a way to ensure that long words will wrap correctly in this flexbox layout? Any insights would be appreciated! I'm on Ubuntu 22.04 using the latest version of Css. Is there a better approach?