title: Strange padding behavior of a regular div inside table-cell div
body: <p>So I came across a strange issue today, it only happens in Chrome.
  Have a look at the fiddle:
  <a href="https://jsfiddle.net/m1npLfcm/1/" rel="nofollow">https://jsfiddle.net/m1npLfcm/1/</a></p>
  
  <pre><code>&lt;div class="table"&gt;
      &lt;div class="row"&gt;
          &lt;div class="cell"&gt;
              &lt;div class="content"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There is some basic table layout made of DIVs, a table, a row and a cell. All of them have 100% width and height. Inside the cell there's a regular DIV. It has 100% width and height and also some padding.</p>
  
  <p>As we all know default <strong>box-sizing: content-box</strong> for div would push the boundaries by that padding. So I've made it <em>box-sizing: border-box</em> as I usually do and now I have this strange behavior.</p>
  
  <p>Seems like in this situation, box-sizing: content-box is only applied to the width and height works just fine by default without pushing the boundaries. However if I add box-sizing: border-box - the width gets to work fine but the height gets total vertical padding subtracted from it as if previously content-box acted as it should have been.</p>
  
  <p>Just what the hell is this? It only happens in Chrome and I'm totally confused. Has anyone seen this before and how this should be treated? Brief googling didn't help as this issue is quite hard to describe in a few words.</p>