Max-Width on DIV with Display: Table

Question

I have a header with a div which have display:table; max-width: 800px. It should act as a frame to restrict the contents width. Inside the frame are images which auto-scale and are nested inside div's with display:table-cell.

Everything is working on Chrome and Mobile Safari, but Firefox and IE are not restricting the frame width.

jsFiddle

Can anybody help me, please ;(

Answer 1

Set the table to have table-layout: fixed and a width of 100%.

.frame {
  display: table;
  max-width: 800px;
  width: 100%;
  height: 300px;
  margin: 0 auto;
  padding: 10px;
  background: #ccc;
  table-layout: fixed
}
.item {
  display: table-cell;
  vertical-align: middle;
  padding: 0 5px;
}
img {
  max-width: 100%;
  height: auto;
}

<div class="frame">
  <div class="item">
    <img src="http://lorempixel.com/250/250" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/250/200" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/250/100" />
  </div>
</div>