title: CSS force line break on container extension
body: <p><strong>What i have:</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="text"&gt;
          Some long text
      &lt;/div&gt;
      &lt;div class="extendable"&gt;
          &lt;img&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
      float: right;
      min-width: 10em;
      padding-left: 1em;
      .text {
          padding: 0.3em;
      }
  }
  </code></pre>
  
  <p>Every block has dynamic width and height.<br>
  <a href="http://jsfiddle.net/vZ4eA/" rel="nofollow">http://jsfiddle.net/vZ4eA/</a></p>
  
  <p><strong>What i want:</strong><br>
  <code>.text</code> shouldn't be able to extend <code>.container</code> if the content gets too big. There should be a forced line break.<br>
  <code>.extendable</code> on the other hand should make <code>container</code> bigger if the content exceeds the width (behave normally).</p>