title: Display: table-cell problems in chrome
body: <p>I have 3 divs that I would like to display as table cells:</p>
  
  <pre><code>&lt;div class="field"&gt;
      &lt;div class="row"&gt;
          &lt;label for="name"&gt;Subdomain&lt;/label&gt;
          &lt;input type="text" id="name" name="name"&gt;
          &lt;div class="subdomain-base "&gt;test&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS that I am using:</p>
  
  <pre><code>body{
      font-size: 13px;
  }
  
  .field {
      width:450px;
      display: table;
  }
  .row {
      display: table-row;
      width: 100%;
  }
  .row &gt; * {
      display: table-cell;
      border: 1px solid red;
  }
  label {
      width: 125px;
      height: 18px;
  }
  input {
      max-width: none;
      min-width: 0;
      overflow: auto;
      height: 18px;
      width: 100%;
  }
  .subdomain-base {
      height: 18px;
      width: 1px;
  }
  .subdomain-base {
      color: blue;
      font-size: 13px;
  }
  </code></pre>
  
  <p>It works perfectly in Firefox 24:
  <img src="https://i.stack.imgur.com/bgKYk.png" alt="enter image description here"></p>
  
  <p>However, it has a height problem in Chrome 30 (latest):
  <img src="https://i.stack.imgur.com/Fge8y.png" alt="enter image description here"></p>
  
  <p>I have been trying all sorts of things to fix the problem with Chrome, but it seems like nothing works. Why is chrome getting that extra height?</p>
  
  <p>Jsfiddle: <a href="http://jsfiddle.net/ahLMH/" rel="nofollow noreferrer">http://jsfiddle.net/ahLMH/</a></p>