in chrome, word-wrap: break-word breaks words even if there is no space

Question

The following markup and CSS causes weird behaviour in Chrome:

#parent {
  background: yellow;
  height: 120px;
  margin-bottom: 20px;
  width: 100px;
  word-wrap: break-word;
}
#box {
  background: red;
  float: left;
  height: 100px;
  width: 100%;
}

<div id="parent">
  <div id="box"></div>
  <div>OIL</div>
</div>
<div id="parent">
  <div id="box"></div>
  <div>OWL</div>
</div>

Fiddle: https://jsfiddle.net/7sq3ybxr/

The upper example (containing the word OIL), causes word breaks even though there is literally no room to the right. The lower one doesn't. I'm assuming it's got something to do with the character width. In other browsers, the word is always displayed below the box, as expected.

Does anybody know what causes this behaviour or have an idea for a workaround? The size, float and word-wrap properties must stay, however.

Edit: Oh, by the way, writing the markup like this seems to fix it, but it's not something I have control over (imagine user input via tinyMCE):

<div id="parent">
    <div id="box"></div>
    <div>
        OIL
    </div>
</div>

Answer 1

This appears to be a bug in Chrome.

In Chrome 50.0.2661.102 m the expected result was displayed

In Chrome 51.0.2704.103 m the undesired result is displayed

What can be done to avoid this issue?

I imagine that this bug will be fixed in time, but in the meantime you could use letter-spacing to increase the amount of space taken by the letters and force the expected behaviour.

.parent {
  background: yellow;
  height: 120px;
  margin-bottom: 20px;
  width: 100px;
  word-wrap: break-word;
}
.box {
  background: red;
  float: left;
  height: 100px;
  width: 100%;
}
.word {
  letter-spacing: 1.8px;
}

<div class="parent">
  <div class="box"></div>
  <div class="word">OIL</div>
</div>
<div class="parent">
  <div class="box"></div>
  <div class="word">OWL</div>
</div>

JS Fiddle