やりたいこと

モーダルを表示したい
実装では

画面をグレーアウトさせる親要素
モーダルの中身の子要素

を作成しています

HTML
1<div className="modal">
2  <div className="inner">
3    // 中身
4    </div>
5  </div>
6</div>

CSS
1.modal {
2  position: fixed;
3  top: 0;
4  right: 0;
5  bottom: 0;
6  left: 0;
7  background: rgba(0, 0, 0, 0.5);
8  z-index: 1000;
9}
10
11.inner {
12  background: #fff;
13  box-sizing: border-box;
14  display: flex;
15  flex-flow: column;
16  max-height: 100%;
17  margin: 10rem 2rem 10rem;
18  padding: 1rem;
19  overflow: scroll;
20}

問題

innerクラスにmargin-bottomが設定されない
innerクラスの中身が多いと見切れる (scrollしても見えないところがある)

ワークアラウンドとしてheight: 70vhを設定していますが、高さを絶対値で指定しない方法と、なぜこの現象が起きているのかを知りたいです

hatena19

2019/09/28 14:05 編集

HTMLで閉じタグが多いです。あと、className="modal" は class="modal" ですよね。また、タグが JavaScript、Google Apps Scriptとなってますが、HTML、CSS に修正してください。

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

回答1件

高さを、100%から上下マージンを引いたものにすればいいでしょう。

css
1.inner {
2  background: #fff;
3  box-sizing: border-box;
4  display: flex;
5  flex-flow: column;
6  max-height: calc(100% - 20rem);
7  margin: 10rem 2rem 10rem;
8  padding: 1rem;
9  overflow: scroll;
10}