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/

結果：FFの

間違った結果： を

Answer 1

私の同僚は、回避策を見つけた：

はposition: absolute; width: 100%;更新フィドルhttps://jsfiddle.net/m1fobvwv/3/