title: CSS - setting word-wrap in a dynamically sizing container
body: <p>I'm having a problem getting long lines of text to correctly break and wrap in a chat feature that I'm working on.  The HTML below is the relevant set of nested elements, but the crux of the biscuit is with <code>.chat__messages__item</code> and <code>.chat__messages__body</code> (the whole block below is inside of an element that is set to <code>24vw</code>, so it is all intended to be window-width-responsive).</p>
  
  <p>First off, here's the HTML/CSS...</p>
  
  <pre><code>&lt;style&gt;
      .chat__messages__inner{
          display: table;
          height: 100%;
          width: 100%;       
      }
  
      .chat__messages__list {
          display: table-cell;
          vertical-align: bottom;
          margin: 0;
          padding: 10px 20px 0;
          list-style-type: none;
      }
  
      .chat__messages__item {
          position: relative;
          margin-bottom: 10px;
          padding: 8px 10px;
          background-color: #D8F2FD;
          clear: both;
      }
  
  
      &lt;!-- THIS STYLE HAS NO AFFECT UNLESS I SET A MAX-WIDTH ON .chat__messages__item --&gt;
      .chat__messages__body {
          word-wrap: break-word;
      }
  &lt;/style&gt;
  
  &lt;div class='chat__messages__inner'&gt;
      &lt;ul class='chat__messages__list'&gt;
          &lt;li class='chat__messages__item'&gt;
              &lt;div class='chat__messages__body'&gt;
                  hereisaverylonglineoftextthatiwouldliketobreakandwrap
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class='chat__messages__item'&gt;
              &lt;div class='chat__messages__body'&gt;
                  here is a long sentence that will wrap and behave correctly
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The desired behavior is that the <code>&lt;div&gt;</code> and <code>&lt;li&gt;</code> containing the text should be no wider/taller than the text itself, but those elements also should never be wider than their parents - so for a few words, they might be 150px wide, but if the container shrinks to be less than 150px, these elements will also start to shrink and the text inside will start to wrap.</p>
  
  <p>Playing with this code, I was able to get close to the desired result by setting the style for <code>.chat__messages__body</code> to include <code>word-wrap: break-word</code> and then setting the parent <code>.chat__messages__item</code> to include <code>max-width: 300px</code> (omitted above).  Although the long word would break and wrap, it only produced the correct result on my full-screen window - if the window is resized or starts off at less-than-full, the word still wraps but the div is 300px wide (I tried setting this as a percentage, but that does not work, the word actually unwraps).</p>
  
  <p>The long sentence that I included above does exactly what I would like - its parent <code>&lt;div&gt;</code> and <code>&lt;li&gt;</code> are both the size of the text, and if the window shrinks so that the width of these elements would be greater than their parents (which all scale to the <code>24vw</code> ancestor), they begin to shrink as well and the text wraps on spaces.</p>
  
  <p>In plain English, I would like the long word's container to never be wider than the 100% width ancestors, and it needs to resize dynamically with the window, breaking and wrapping along the way.</p>
  
  <p>I'm not really a CSS/design expert, this is code I inherited from someone else, and I've been fighting with this for way too long... any guidance would be much appreciated.</p>