CSS - word-wrap vs word-break

I've been reading a lot but I can't seem to understand the difference between word-wrap: break-word and word-break: break-word (note: I don't use CJK languages so differences in this aspect are irrelevant to me).

Actually, I can see differences in the way they act: word-break breaks in the middle of words if it has to, considering the width of its ancestors. word-wrap on the other hand only cares about its own width. It will not break if the element's width exceeds its parent's width. This seems strange to me. Is it really the difference between the two?

See examples here: word-break works: http://ift.tt/2xnCpOU word-wrap doesn't work: http://ift.tt/2wt4MPc

<div style="display: flex; font-size: xx-large;">
  <span>woohoo</span>
  <div style="word-break: break-word; vertical-align: top">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
</div>

Related question: CSS - inline blocks side by side with 100% width

I want to really understand how both word-wrap and word-break work (especially word-wrap) but I can't seem to find the answer anywhere.

Thank you