title: CSS Flex: Text escapes from container
body: <p>Having an issue with CSS flex layout that I can't figure out.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="image-view"&gt;
      &lt;div class="info"&gt;
          &lt;span class="label title"&gt;d37ci4x.jpg&lt;/span&gt;
          &lt;span class="label scale"&gt;100%&lt;/span&gt;
      &lt;/div&gt;
      &lt;img src="http://i.imgur.com/rfcsACA.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.image-view {
      display: inline-block;
      border: 1px #000 solid;
  }
  
  .image-view .info {
      display: flex;
      border-bottom: 1px #000 solid;
  }
  
  .image-view .info .title {
      overflow: hidden;
      white-space: nowrap;
      flex: 5 1 100%;
  }
  
  .image-view .info .scale {
      flex: 1 0 1em;
      padding-left: 2em;
      border-left: 1px #000 solid;
  }
  </code></pre>
  
  <p>Result:</p>
  
  <p><img src="https://i.stack.imgur.com/31ihJ.png" alt="screenshot of issue"></p>
  
  <p>Also live at <a href="http://jsfiddle.net/omhaohyd/" rel="nofollow noreferrer">http://jsfiddle.net/omhaohyd/</a></p>
  
  <p>The issue here is that the "100%" text is somehow being pushed to the right, out of its container. Removing the padding hasn't helped - it correctly shrinks the container and moves the text up against the left edge, but the container ends up <em>too</em> small, so the text still flows out of it. Giving the <code>.scale</code> more space (increasing the <code>1em</code> and reducing the <code>.title</code>'s <code>100%</code>) does fix it, but adds a lot of whitespace around the "100%" as well, and I simply don't want it that large.</p>
  
  <p>This is in Firefox 30.0 on Lubuntu x64.</p>