Chrome vs. box-sizing:border-box in a display:table

Question

I'm doing a small 2-pane layout using display:table. For spacing (also from the background image), I use padding. As I need the children to have an exact width:50% from the available space (taking regard for the padding of the parent div), I use box-sizing:border-box.

This works fine in Opera, but in Chrome the box-sizing:border-box or even -webkit-box-sizing:border-box is silently ignored.

I made a demo which shows the issue. The two red boxes should be square and the blue box should be 200px in width and height: http://jsfiddle.net/fabb/JKECK/

Here's the html source:

<div id="table">
    <div id="left">
        Something on the left side
    </div>    
    <div id="right">
        Something on the right side
    </div>
</div>

And the css:

#table {
    display: table;
    /*border-collapse: collapse;*/

    width: 200px !important;
    height: 200px !important;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;

    margin: 0;
    border: 1px solid blue; 
    padding: 60px 20px;
}

#table #left, #table #right {
    display: table-cell;

    width: 50%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;

    margin: 0; 
    border: 1px solid red;
    padding: 0; 
}

Is this a bug in Chrome? Or am I doing something wrong?

Answer 1

Yes, Google chrome bug:

Issue #103543 - CSS display: table bug

Some case may be resolved by addding/removing specific side of padding (like the jsfiddle in the bug report), but your case may not be possible.

It is easier and more stable by using float there, if width and height is known and you want square cells.

Note: Since table layout have the ability to break the assigned css width/height, it is better not using it unless it is table-like structure or you want to contents expand the container - so your !important in width & height is not working.

Answer 2

Remove -webkit- for chrome browser.