Why does "word-break" work, but "word-wrap" does not work?

Question

I had an easy layout using flexbox.

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!</div>
</div>

This layout overflows the flex container, if the flex item has long text.

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

So I used the overflow-wrap property. But it did not work.

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  overflow-wrap: break-word; /* add */
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

Strangely, "word-break" with the same role as "overflow-wrap" worked fine. ("word-break: break-word;" does not work with Firefox, it works on Chrome)

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  word-break: break-word; /* add */
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

What is the difference between "word-break" and "word-wrap"? From the W3C document, we could not find any differences related to the above behavior.

I read two sections of CSS Text Module Level 3.

• Breaking Rules for Letters: the word-break property
• Overflow Wrapping: the overflow-wrap/word-wrap property

Answer 1

As you already noticed both should behave the same and the issue is somehow related to flexbox. If we use a layout without flexbox, both gives the same result:

.right {
  background: green;
  margin:10px;
}

<div class="right" style="word-break: break-word;">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>

<div class="right" style="overflow-wrap: break-word;">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>

I don't know exaclty why, but it seems related to the min-width setting of flexbox. It can be a bug or something else that make both properties behave differently.

In order to fix the issue you can add min-width:0 to override the default min-width setting:

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  overflow-wrap: break-word; /* add */
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
  min-width:0;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

Answer 2

They are very similar. One problem is that word-break: break-word is still experimental and might cause problems.

But the issue here is display:flex because in order for overflow-wrap: break-word to work it needs to be applied on an element that

has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

So for example adding a width to right but not to left causes this difference. Both are having overflow-wrap: break-word but only one has a specific width.

This is the only difference i could think of between word-break and overflow-wrap when both have break-word as value.

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  overflow-wrap:break-word;
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
  width:50%;
}

<div class="wrap">
  <div class="left">aaa wordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordw bbb!</div>
  <div class="right">aaa wordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordword bbb</div>
</div>