flex-direction: column を設定した際のIE11の挙動がおかしい

Question

コードは少し長いため Codepen に記載したのを張ります。

問題のコード

Chrome等では <div class="scroll"> がスクロール対象(要素？)となるのですが、IE11では <div class="scroll"> の高さが親よりオーバーしてしまい、<div class="body"> の高さが height 100% を超えてしまい、スクロール対象になってしまいます。

親要素に flex-direction: column を設定した際に、IE11 では flex-basis を正しく設定しないとダメとだと調べてる上で理解はしたのですが、なかなか試行錯誤しても、理解出来なかったので質問させていただきました、よろしくお願いします。

Chrome の場合

IE11 の場合

IE11 の挙動確認は https://dabblet.com/ にコードを張り付けて確認

Answer 1

IEの場合にスクロールバーが期待通りにならないのは、div.scroll要素のheightが事実上autoになっていて、コンテンツの高さいっぱいにまでビューポートが広がっているからです。

.scrollにはheight: 100%と指定されていますが、heightにパーセンテージを指定した際の挙動はmozillaのドキュメントを読むとこうなっています。

パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず (すなわち、コンテンツの高さに依存します)、この要素が絶対位置指定されていない場合は、値は auto になります。ルート要素で高さをパーセント値で指定すると、初期包含ブロックに対する相対値になります。

https://developer.mozilla.org/ja/docs/Web/CSS/height

当該要素の包括ブロックにもheightが明示されてない場合は、どんどん親要素をさかのぼっていくことになります。ところが、この件の場合親要素をrootまでさかのぼっても明示的なheightを指定している要素は存在しません。
div.modalでmax-height: 300pxを指定していますが、これはIE11では「ブロックの高さを明示」している扱いにならないのでしょう。
なので、div.scrollのheight: 100%は包括ブロックを全てさかのぼっても明示された高さがないのでauto扱いになっています。autoの場合、中のコンテンツが全部入りきるまでサイズが拡張されるのでoverflowも無意味となります。

解決策としては、どこかに具体的数値のheightを指定すれば良いかと思います。元のレイアウトの意図に合うかどうかは分かりませんが、div.modalにheight:300pxを指定すればとりあえずOKなのではないでしょうか。
少なくとも私が検証した限りではこの指定で他のブラウザと同等のスクロール表示になりました。

Comments

[qkz]

本当に詳しくありがとうございます、そういう事だったんですね…。

ブラウザの高さが変わった際に動的に height を消したり付けたりする js を書いてみようと思います。

[hope_mucci]

ブラウザの高さに合わせてheightを変えたかったら、vh指定で良いのではないかなとも思います。

[qkz]

言葉足らずでした、modal の 高さが変わった際に height 指定を消して、modal element を取得して element.offsetHeight から height を設定しようと思っています。

[hope_mucci]

offsetHeightは読み取り専用なのでこれに値をセットしても要素の大きさは変わりません。
style.heightで設定しましょう。elementに直接指定した値が最優先なのでスタイルシート側を変更する必要はありません。