Why do Firefox and Opera ignore max-width inside of display: table-cell?

Question

The following code displays correctly in Chrome or IE (the image is 200px wide). In Firefox and Opera the max-width style is ignored completely. Why does this

Answer 1

Have you tried adding a position property to your image? img {position:relative;}? It should conform to the parent element.

Answer 2

This has become a very confusing topic...

Max-width doesn't work on inline elements neither in table-cell elements. It DOES work on an image if its display is set to block, but what is 100%? In a table layout, the content of a cell pushes the column width to accommodate all content as possible. So max-width:100%, inside a table cell ends up being the natural width of the content in most cases.

That is why setting the max-width property of your image in pixels works:

<style>
    div { display: table-cell; padding: 15px; width: 200px; }
    div img { max-width: 200px; display:block;}
</style>

table-layout: fixed, as suggested by Alex, may work if the image is not in the first row of the table, because the first row's content dictates columns widths.

Answer 3

What you need to do is to put your wrapper div (the one with display: table-cell) inside another div that has display: table and table-layout: fixed. That makes both Firefox and Opera respect the max-width rule.

See this example on jsFiddle.