テキストがスクロールするモーダルダイアログのCSS

Question

CSS、HTMLで内部のテキストが縦スクロールするモーダルダイアログを作りたいのですが、実現方法が分からず困っています。
良い方法がわかれば教えてもらえますでしょうか？

やりたいこと

• モーダルダイアログを画面の中心に表示する
• ダイアログは表示するテキストの量に合わせて、高さが大きくなる（テキストが少ない場合はダイアログも小さい）
• ただしダイアログの高さは画面サイズの90%以上大きくならない
• 画面サイズの90%に収まらないテキストは縦スクロールする

サンプル

CodePenでサンプルを作りました。
https://codepen.io/yamamotokeita/pen/JjEevrX?editors=1111

上手くいかない点

サンプルの「文字が少ない」パターンは問題なく表示できますが、「文字が多い」場合にテキストがダイアログボックスをはみ出してしまいます。
ダイアログテキストの要素に height: 80% を指定しているのですが、おそらく親のheightが固定されていないため効いていないのだと思います。

ダイアログの高さを固定すればテキストがはみ出さないようにできるのですが、高さ不定の状態ではみ出さないようにする方法が分からず質問させて頂きました。

補足

JavaScriptを使えばどうにかできそうな気がしますが、ひとまずHTML、CSSのみでの解決方法を探しています。

Comments

[Lhankor_Mhy]

「画面サイズの90%」というのは、コード中のどこで指定されていますか？

[rim_yamamoto]

CSSの27行目 `max-height: 90%;` の部分になります。

[Lhankor_Mhy]

height: 90% でいいように思えるのですが、この場合、どのような問題が生じますか？

[rim_yamamoto]

height: 90% にすると表示するテキストが１行でもダイアログが大きくなってしまいます。
表示するテキストが少ない場合は、ダイアログも小さく表示したいです。

[Lhankor_Mhy]

つまり、.dialog-text の高さを .dialog-body の高さに依存させたいが、.dialog-body の高さは .dialog-text の高さに依存させたい、という問題の理解で合っていますか？

[rim_yamamoto]

はい。その通りです。
サンプルのコードだとそういう話になりますが、サンプルとは全然違う形で「やりたいこと」が実現できるなら、それでも問題ありません。

Answer 1

.dialog-text の高さを .dialog-body の高さに依存させたいが、.dialog-body の高さは .dialog-text の高さに依存させたい

そのような循環的な参照関係は難しいと思います。
ですが、幸いなことに.dialog-bodyの高さは最大90vhと決まっているのですから、.dialog-textの高さは最大72vhです。
それをそのまま記述するのはどうでしょうか。

.dialog-text {
	max-height: 72vh;
}

Comments

[rim_yamamoto]

ありがとうございます！
全画面表示の前提なので、vhを使って実現できそうです。

Answer 2

.dialog-textの高さが80%だけど、その親要素である.dialog-bodyに高さ指定してないから効いてないです。
だからwindowの高さになってる。

.dialog-bodyにheight:100%;でも指定してあげればいいです

Comments

[rim_yamamoto]

分かりづらくてすいませんが、「やりたいこと」の2行目に書いたとおり、ダイアログの高さは表示するテキストに応じて自動で変わるようにしたいのです。

.dialog-bodyにheight:100% を指定すると、テキストが１行でもダイアログが大きくなってしまいますが、テキストが１行の場合はダイアログも小さくしたいです。