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?

Cathicathie

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.

Conover

Thank you so much for your note - it helped me to find a workaround. I removed the display:table from #table, which makes my layout working in Chrome, Opera and Firefox. There are 2 downsides that luckily don't affect me: 1) the single cells don't span the whole height anymore, and 2) no other display:table* should be there as it could interfere. Have you got any additional information, why an element with display: table might break width or height properties (had that issue in Opera when trying another workaround)? – Cathicathie

"Table width is breakable" this is because this is a kind of inline-block model (historical reason - may be people prefer it can expand based on content), see th link for the spec link. To fix the problem, you may try table-layout:fixed link for more solution – Conover

p.s. if you want the cell span the whole height, try flexbox: webkit updated version or CSS3 flex box, the supported version -- – Conover

flexbox is nice, thanks for the tip! unfortunately no opera support: caniuse.com/#search=flexbox – Cathicathie

Rolled back 3rd party edit which altered the meaning of the post by removing a potentially important qualifier on its applicability. – Lummox

Answer 2

Remove -webkit- for chrome browser.

Ane