'break-words' does not wrap when wrapped in a flex container

[conpat]

What version of Tailwind CSS are you using?

Version: 3.2.4

What build tool (or framework if it abstracts the build tool) are you using?

phoenix: 1.7.1
elixir: 1.14

What version of Node.js are you using? None, because it is Elixir

What browser are you using?

Tested on:

• Chrome 113.0.5672.92 (Official Build) (x86_64)
• Safari 16.4 (18615.1.26.110.1)

What operating system are you using?

macOS Ventura 13.3.1 (a) (22E772610a)

Reproduction URL

https://play.tailwindcss.com/VKcENrNScV

Describe your issue

The Tailwind 'break-words' option does not work as expected in every scenario.

As seen in the example. The break-words option does not behave like the deprecated css option break-word (6th span) or its successor (4th and 5th span).

I expected the 1st span to wrap just like the 3rd (difference is the w-full)

Creating the example for this issue I figured out it is due to the flax wrap as seen in the 2nd span where its missing the flex` and behaves as expected.

The 4th span uses the solution described on mdn and works where break-words doesn`t.

[thecrypticace]

Hey! So this is the same issue as #5446 and #10004. The property/value word-break: break-word is deprecated which is why it's not used.

What you'll want to do is add min-w-0 to your element which fixes the problem. I've updated your Tailwind Play to showcase this: https://play.tailwindcss.com/mDicZ0rIM4

Hope that helps! ✨

[conpat]

Yes, word-break: break-word is deprecated.
Why not implement word-break: normal; overflow-wrap: anywhere;?

Thanks for the help and sorry for not finding the previous issues.

Keep up the great works!

[serkodev]

#12127 Created a related research and discussion for this issue.