title: Why does this behave the way it does with max-width: 0?
body: <p>See <a href="http://jsfiddle.net/mpx7os95/14/" rel="noreferrer">http://jsfiddle.net/mpx7os95/14/</a></p>
  
  <p>The behavior is the desired behavior, which allows the center column in a 3 column layout to take up all the space available AND still allow the text inside of it to overflow into ellipsis when shrunk far enough.  This seems to work due to <code>max-width: 0</code>, but <strong>why</strong> does it produce this effect?</p>
  
  <p>What's so special about <code>max-width: 0</code> in this case?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
    width: 100%;
    display: table;
  }
  .col {
    position: relative;
    min-height: 1px;
    border: 1px #000 solid;
    display: table-cell;
  }
  .x {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
    max-width: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col"&gt;abc&lt;/div&gt;
    &lt;div class="col x"&gt;test blah blah blah blah blah zzzzz.&lt;/div&gt;
    &lt;div class="col"&gt;def&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>