title: Word-wrap doesn't respect parent's width for long non-break text
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    /* 
       Container's width can be dynamically resized. 
       I put width = 300px in the example to demonstrate a case 
       where container's width couldn't hold second msg 
    */
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1em;
    background-color: blue;
  }
  
  .parent{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    padding:1em;
    background-color:red;
    box-sizing:border-box;
    margin-bottom: 1em;
  }
  .name{
    background-color:mistyrose;
    width: 70px;
    padding: 1em;
  }
  .msg{
    background-color:powderblue;
    max-width: 30vw;
    padding:.5em;
    word-wrap:break-word;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='container'&gt;
   &lt;div class="parent"&gt;
      &lt;div class="name"&gt;
        David
      &lt;/div&gt;
      &lt;div class="msg"&gt;
      How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? 
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="parent"&gt;
      &lt;div class="name"&gt;
        Hannah
      &lt;/div&gt;
      &lt;div class="msg"&gt;
      somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Ideally , I want each <code>msg</code> to have max-width of <code>30vw</code>, but at the same time respect parent's width. The <strong>first</strong> row behaves correctly, but the <strong>second</strong> row doesn't. If parent's width is resized to some value smaller than 30vw, the <strong>second</strong> msg will overflow. </p>
  
  <p>I want something like <code>max-width = min(30vw, parent's width)</code></p>
  
  <p><strong>NOTE</strong>: Container's width can be dynamically resized. I put width = 300px in the example to demonstrate a case where container cannot hold the second msg which somehow has width = it's max-width = 30vw.</p>
  
  <p><strong>You can also see the example at</strong> <a href="http://jsfiddle.net/vbj10x4k/231/" rel="noreferrer">http://jsfiddle.net/vbj10x4k/231/</a></p>