title: How are `display: table-cell` widths calculated?
body: <p>This question comes out of <a href="https://stackoverflow.com/questions/21129300/bootstrap-3-0-x-how-to-unconstrain-input-group-input-width-when-using-glyphico/21129530#21129530">this existing question</a> which I provided a solution to, but couldn't provide an explanation as to why.</p>
  
  <p>I've stripped their fiddle right down to the bare bones and have the following HTML / CSS:</p>
  
  <pre><code>&lt;div class="table"&gt;
    &lt;span class="cell-1"&gt;cell 1&lt;/span&gt;
    &lt;span class="cell-2"&gt;cell 2&lt;/span&gt;
  &lt;/div&gt;
  
  .table {
    display: table;
  }
  
  .cell-1, .cell-2 {
    display: table-cell;
    padding: 6px 12px;
    border: 1px solid #ccc;
  }
  
  .cell-1 {
    padding: 6px 12px;
    background-color: #eee;
    border-right: 0;
    border-radius: 4px 0 0 4px;
    width: 1%; /* *** FOCUS HERE *** */
  }
  
  .cell-2 {
    border-radius: 0 4px 4px 0;
  }
  </code></pre>
  
  <p>Only <code>.cell-1</code> has a width and that is 1%. <strong><a href="http://jsfiddle.net/davidpauljunior/va9Mk/6/" rel="nofollow noreferrer">This is the result (fiddle link)</a></strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/CzA9N.png" alt="enter image description here"></p>
  
  <p>If I then increase the width of <code>.cell-1</code> to a value where it is wider than it's content, say 10% (I think that's the pattern anyway) then second cell will become narrower.  Why?  Where does that width come from?
  <strong><a href="http://jsfiddle.net/davidpauljunior/va9Mk/9/" rel="nofollow noreferrer">This is the result (fiddle link).</a></strong></p>
  
  <p><img src="https://i.stack.imgur.com/hd8th.png" alt="enter image description here"></p>
  
  <p>If I then take the second example, but add <code>width: 100%</code> to the <code>.table</code> then it goes back to 100% again.  <strong><a href="http://jsfiddle.net/davidpauljunior/va9Mk/10/" rel="nofollow noreferrer">Here's the result of that (fiddle link)</a></strong>.</p>
  
  <p>I'm sure there's a logical explanation but I'm just not seeing it.  Anyone?</p>