title: Css for an element that allows break-word on child divs, but that can also expand to take the width of its children
body: <p>I'm trying to determine whether it's possible to create css for an element that supports <code>word-wrap:break-word</code>, but that also expands to take the width of its children when breaking is not possible.</p>
  
  <pre><code>&lt;html&gt;
    &lt;style&gt;
    .outer {
      background-color:red;
      word-wrap:break-word;
    }
    &lt;/style&gt;
    &lt;div class="outer"&gt;
      User generated content:
      &lt;a href="http://www.google.com"&gt;http://anannoyinglylongurlthatcausesthepagetogrowtolongunlessIusewordwrapbreakwordasdfasfasdfasdfasdfasdfasdfsadfasdfadsf&lt;/a&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;asdfasdfadsffdsasdfasdfsadfafsd&lt;/td&gt;
          &lt;td&gt;asdfasdfadsffdaasdfassdffaafasds&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/&gt;
    &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the above sample, the url breaks properly, but the table and img overflow the red outer div if the window becomes narraower than the table.</p>
  
  <p>If I make the outer div display:inline-block or display:table, the red outer div correctly expands to include the content, but the url doesn't break if the window is narrower than the url.</p>
  
  <p>I only need this to work in WebKit (on Android), and I'm trying to find a CSS only (no Javascript) solution if possible.</p>