Chrome/Firefox 与负边距底部百分比的差异

Question

我在 webkit 和 Firefox 之间使用父母的高度 100% 来解释盒子大小的差异。

HTML：

<header>
  Lorem ipsum dolor amet
</header>
<div class="wrapper">
  <div class="content">
    My background depends on my ancestor sibling
  </div>
</div>
<div class="red">
  <p class="white">
  Amet ipsum dolor
  </p>
</div>

CSS：

header {
  height: 150px;
  background: #fff;
}
.red {
  background: red;
  padding: 6em 0;
}
.content {
  background: rgba(28,28,28, .3);
  margin-bottom: -100%;
}
.wrapper {
  position: relative;
  height: 100%;
}
p.white {
  background: #fff;
  width: 70%;
  margin: 0 auto;
}

这里的JS小提琴https://jsfiddle.net/m1fobvwv/

Chrome 上的结果（预期）：

FF 上的错误结果：

Answer 1

我的一位同事找到了解决方法：

将position: absolute; width: 100%; 添加到.content

更新小提琴https://jsfiddle.net/m1fobvwv/3/