当父元素具有填充时最大高度错误

Question

在下面的示例中，没有从最大高度中使用100％的高度（减去了容器的填充）。 它显示在Chrome和Safari中，但不出现在Firefox中。 是Chrome / webkit的错误吗？

如果您将最大高度设置为100％，而不是最大高度，则红色框会消失

红色框是由容器元素的填充引起的

.containerWrapper {
  height: 400px;
}
.container {
  padding: 10px;
  background: yellow;
  position: relative;
  height: 300px;
}
.dialog {
  position: absolute;
  top: 0;
  background: red;
  height: 500px;
  max-height: 100%;
}
.dialogContent {
  height: 100%;
  background: green;
  margin: 0;
  display: block;
}

<div class="container">
  <div class="dialog">
    <p class="dialogContent">
      Dialog content
    </p>
  </div>
</div>

如果还摆弄着： https://jsfiddle.net/8cykht4b/12/