私は背景オーバーレイとモーダルを持つディスプレイフレックス

Question

でモーダルオーバーレイでトップにスクロールすることはできません、これは私の例である：

https://codepen.io/tyrellrummage/full/XeRQYm/

（上部と下部を表示するには、ウィンドウを小さくしますオーバーフロー）。

基本的構造は以下の通りである：

<div class="overlay"> 
    <div class="modal"> 
     //content 
    </div> 
</div> 

と現在スタイリング：

.overlay{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow-y: scroll; 
} 

.modal{ 
    margin: 4rem 0; 
} 

これは（切り出し）モーダルの底部のために働くが、頂部がトリミングされます。これはCSSでのみ修正できますか？

Answer 1

これがなぜ起こるかについての非常に詳しい説明は、in this awesome answerと読むことができます。

topとbottomの両方の余白が.modalに設定されており、autoに設定されている必要があります。

の余白をpaddingの.overlayとする必要があることを意味します。今度は、パディングが、その結果、添加していない、高さから減算されているので、あなたは、また、それにbox-sizing:border-boxを適用する必要があることを意味し、

：

.modal { 
    margin: auto 0; 
} 
.overlay{ 
    padding: 4rem 0; 
    overflow-y:auto; 
    box-sizing: border-box; 
}