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/