CSS table and max-width in Chrome not working

Question

This is my CSS code;

#wrap {     width:50em;     max-width: 94%;     margin: 0 auto;     background-color:#fff;   }  #head {     width:50em;     height:10em;     max-width: 100%;     margin: 0 auto;     text-align:center;     position: relative; }  #css-table {      display: table;      margin: 1em auto;     position: relative;     width:50em;     max-width: 100%;             }  #css-table .col {      display: table-cell;      width: 20em;     padding: 0px;     margin: 0 auto; }  #css-table .col:nth-child(even) {      background: #fff; }  #css-table .col:nth-child(odd) {      background: #fff;     border-right: 4px double #b5b5b5; } 

And my HTML code;

<div id="cont">     <div id="css-table">         <div class="col">123</div>         <div class="col">123</div>     </div> </div> 

When I scale the Firefox window, the table scales fine even down to 300px width viewport...just like I want to. But in Chrome, the table looks normal only when the viewport is wider than 50em. If I narrow the Chrome window, the table bleeds out on the right side of the wrap.

Is there a reason why is Chrome doing this?

Answer 1

Technically Chrome is following the rules because max-width should only apply to block elements.

From MSDN docs:

The min-width/max-width attributes apply to floating and absolutely positioned block and inline-block elements, as well as some intrinsic controls. They do not apply to non-replaced inline elements, such as table rows and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img or textArea.)

The table (or in your case display:table) should technically not work or be supported. FF apparently obeys it fine, but you'll probably need to come up with another solution, either removing the display:table or the max-width.

max-width property

MSDN Doc