Firefox：オーバーフローした固定配置要素にパディングボトムが表示されない：フレックスコンテナがスクロールする

Question

Firefoxにパディングボトムが表示されないという問題があります。

コンテナの表示プロパティにflex値がある場合、子要素のマージンボトムは無効です。 （表示：ブロックはOKです）

これはFirefoxでのみ発生します。他のブラウザでは、パディング - 先祖の下にマージン - 下が子孫に表示されます。

私に教えてください、なぜこれが起こっているのですか？私は仕様書を読みましたが、答えを見つけることができませんでした。

http://codepen.io/anon/pen/XdeOzy?editors=1100

HTML：

<div class="wrap"> 
    <div class="modal"> 
     <b>[BEGIN]</b> Lorem ipsum dolor sit ... <b>[END]</b> 
    </div> 
</div> 

はCSS：

* { 
    box-sizing: border-box; 
} 

.wrap { 
    position: fixed; 
    top: 0; 
    left: 0; 

    display: flex; 
    width: 100vw; 
    height: 100vh; 

    padding: 20px; /* padding-bottom is not displayed in FF */ 
    overflow-y: scroll; 

    background: rgba(0, 0, 0, .6); 
} 

.modal { 
    width: 400px; 
    margin: auto; 

    /* in the FF it works only when .wrap element 
     has display property with block value, not flex */ 
    /* margin-bottom: 20px; */ 

    padding: 20px; 

    background: #fff; 
} 

Answer 1

私は、これは非常に奇妙なバグだった、と言っている...私は見ていませんそれ以前。あなたのモーダル要素がラッパーとうまく協力していないとき、要素の重複が問題になるようです。それは次のようにCSSを変更することで解決することができます。

.wrap{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    display: block; 
    width: 100vw; 
    height: 100vh; 
    overflow-y: scroll; 
    background: rgba(0, 0, 0, .6); 
} 
.modal{ 
    width: 400px; 
    margin: 20px auto; 
    padding: 20px; 
    background: #fff; 
}