CSSで真ん中に置きながら、スクロールで全て見えるようにできませんか？

###実現したいこと
高さ不定の.contentsについて、それを.modalの真ん中に置きつつ、.modalのスクロールで全て見えるようにしたいです。

###発生している問題
.contentsをdisplay:flex;等で真ん中に置きました。
しかし.contentsが画面の高さを超えると、上の方が見えなくなってしまいます。

###該当のソースコード
このような簡単なコードですが、問題の解決が大変困難です。

html
1<div class="modal">
2    <div class="contents"></div>
3</div>

css
1.modal {
2    position: fixed;
3    top: 0; right: 0; bottom: 0; left: 0;
4    width: 100vw;
5    z-index: 100;
6    display: flex;
7    align-items: center;	    
8    justify-content: center;
9    overflow: hidden scroll;
10    background: green;
11}
12.contents {
13    position: relative;
14    width: 200px;
15    height: 1000px; /* 高さは不定 */
16    padding: 0 10px;
17    background: lime;
18    display: flex;
19    align-items: center;
20    justify-content: center;
21}

###試したこと【CSS編】
まずdisplay:flex;をやめ、真ん中に置く他の方法としてCSSのvertical-alignおよびtransformプロパティを試しました。

しかしやはり上の方が見えなくなってしまうことは変わりありませんでした。

###試したこと【JS編】
次にJSで「.contentsの高さを測り、画面の高さを超えた場合にだけ.modalのalign-items: center;を外す」という方法を試しました。

これで問題はなんとか解決はしたのですが、これをCSSで実現できないかと思い質問させて頂きました。

下は見えるのに上が見えなくなってしまう原因も知りたいです。
宜しくお願い致します。

m.ts10806

2019/11/30 21:28

「JavaScript」もタグに追加しておいてください。

s8_chu

2019/11/30 21:34

今回の質問内容を読む限り、 JavaScript タグは必要ないと思います。

twentytwenty

2019/11/30 23:13

s8_chuさまの仰る通りで、JavaScript の解決方法は求めてないので付けませんでした。

行動規範の内容に同意します

回答2件

ベストアンサー

flex 行における交叉サイズが flex アイテムよりも小さい場合に、 flex アイテムが両方向に均等にはみ出すためです。自動マージンによる整列を行うことで、質問文に書かれている問題は改善します (動作確認用リンク)。

§ 8.3. Cross-axis Alignment: the align-items and align-self properties

'center'
The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)

CSS
1.modal {
2  position: fixed;
3  top: 0;
4  right: 0;
5  bottom: 0;
6  left: 0;
7  width: 100vw;
8  z-index: 100;
9  display: flex;
10  overflow: hidden scroll;
11  background: green;
12}
13
14.contents {
15  position: relative;
16  width: 200px;
17  height: 1000px;
18  padding: 0 10px;
19  background: lime;
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  margin: auto; /* 追記 */
24}
25
26.scale {
27  position: absolute;
28  right: -30px;
29}