title: Is it possible to get Flexbox to work inside label?
body: <p>I'm using flexbox to display a text label along with a numeric value in a narrow column, so that the text is truncated with ellipsis if it doesn't fit.</p>
  
  <p>It worked fine, until I had the need to place the entire column in a table-cell - at which point the browser (Chrome) just ignored the column width and made the table wide enough to fit all the text.</p>
  
  <p>Here's the label layout:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="line"&gt;
      &lt;span&gt;Very long label text&lt;/span&gt;
      &lt;span&gt;12345&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.line {
      display: flex;
      width: 100%;
  }
  .line span:first-child {
      white-space: nowrap;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .line span:last-child {
      flex-shrink: 0;
      margin-left: 5px;
  }
  </code></pre>
  
  <p>Placing it in a regular div with a fixed width works as expected. Placing it in a table-cell doesn't:</p>
  
  <p><img src="https://i.stack.imgur.com/tUdoK.png" alt="Flexbox issue"></p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/98o7m7am/" rel="noreferrer">http://jsfiddle.net/98o7m7am/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    width: 150px;
  }
  .table {
    display: table;
  }
  .table &gt; div {
    display: table-cell;
  }
  .line {
    display: flex;
    width: 100%;
  }
  .line span:first-child {
    white-space: nowrap;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .line span:last-child {
    flex-shrink: 0;
    margin-left: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="line"&gt;
      &lt;span&gt;Very long label text&lt;/span&gt;
      &lt;span&gt;12345&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="table wrapper"&gt;
    &lt;div&gt;
      &lt;div class="line"&gt;
        &lt;span&gt;Very long label text&lt;/span&gt;
        &lt;span&gt;12345&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update</strong>: I ended up 'solving' this by using more flexboxes instead of tables, but I would still like to know why the original example doesn't work.</p>