1

So I came across a strange issue today, it only happens in Chrome. Have a look at the fiddle: https://jsfiddle.net/m1npLfcm/1/

<div class="table">
    <div class="row">
        <div class="cell">
            <div class="content">
            </div>
        </div>
    </div>
</div>

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.

As we all know default box-sizing: content-box for div would push the boundaries by that padding. So I've made it box-sizing: border-box as I usually do and now I have this strange behavior.

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.

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
waterplea
  • 3,462
  • 5
  • 31
  • 47
  • 1
    ..that's odd behavior. I have no explanation for it.. but here is a work-around that works in your case... https://jsfiddle.net/amb794we/ – Josh Crozier Mar 20 '15 at 17:12
  • This comment has more explanation: http://stackoverflow.com/a/19069129/4338477 – ratherblue Mar 20 '15 at 17:51
  • @sev, I'm specifically creating a nested DIV inside table-cell and applying all the padding to it so I don't mess with table layout. Looks like I'm gonna have to make another nested DIV in my case :( – waterplea Mar 23 '15 at 08:59

2 Answers2

0

If you see the padding of 20px is the height you are talking about, since there is no elements or content inside the cell there browser only puts the padding.

In your fiddle I played around with the padding of the content and manage to fix the height with the size(red) with the value I want.

I hope that helps you.

eavillacis
  • 1
  • 3
0

Unfortunately an additional div wrapped around .content is required with a class like .inner that will serve specifically as a padding around content.

In this codepen I've changed a bit the CSS of your fiddle:

  • set box-sizing: border-box to all elements, as it's essential
  • replaced .cell with .inner (supported only by evergreen browsers, in IE <= 10 the .cell wrapper should remain)
  • removed the excessive width: 100% for block-level elements

The border/padding is applied correctly as long as the red background of the .table is covered by the .inner

Steven Pribilinskiy
  • 1,862
  • 1
  • 19
  • 21
  • Unfortunately, this is not correct either. Within table-row there must be table-cell. Smart browsers correct that mistake "under the hood" so it looks and works right in Chrome/FF etc, but try your codepan in IE (say IE10) and you will see that the height is not 100%. – waterplea Mar 30 '15 at 08:09
  • Indeed, however it is ok in IE11 which can be considered as smart browser – Steven Pribilinskiy Mar 30 '15 at 11:03