html - Inconsistent behavior of display: table and display: table-cell in different browsers

Question

When used on their own, display: table and display: table-cell behave differently in different browsers.

---

Environment

I did my testing in three different environments :

Environment 1 :

• OS : Linux Ubuntu Desktop 14, 64-bit
• Browser 1 : Chrome 45.0
• Browser 2 : Firefox 43.0

Environment 2 :

• OS : Windows 7, 64-bit
• Browser 1 : Chrome 48.0
• Browser 2 : Firefox 44.0

Environment 3 :

• OS : Windows 10, 64-bit
• Browser 1 : Chrome 51.0
• Browser 2 : Firefox 47.0

---

Case 1 - display: table & box-sizing: content-box

.container {
    display: table;
    width : 500px;
    height: 150px;
    background: #ccf;
}
    
.content {
    color: #000;
    height : 100%;
    padding: 20px;
    background: #ffc;
}

<div class="container">
    <div class="content">
        Lorem Ipsum
    </div>
</div>

Answer 1

In the first snippet, since .content has a percentage height but its parent (an anonymous table-cell) has height: auto, the percentage should compute to auto. See the spec:

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Chromium has already fixed this issue (bug 353580) since version 50.0.2629.0 (commit).

The second snippet is more tricky, because the height of the table cell will be the maximum between the length given by the height CSS property and the height required by the content. But if that content uses a percentage, it's a circular definition.

Therefore, this seems an implementation-dependent case. You can avoid the circular definition by taking the content out-of-flow:

.container {
  position: relative;
}
.content {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.container {
  display: table-cell;
  width : 500px;
  height: 150px;
  background: #ccf;
  position: relative;
}
.content {
  color: #000;
  padding: 20px;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #ffc;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="container">
  <div class="content">
    Center this!
  </div>
</div>