問題「オーバーフロー：自動」Internet Explorerの流体フレキシボックスコンテナ内部の要素に11

Question

タスク：

ブラウザウィンドウの中央にする必要がある流体高さの箱があります。これは3つの部分から構成されます。 - トップ 内のテキストに応じて任意の長さの部分 - 下部のテキストindside に応じて任意の長さを持つ - テキスト

に合うように十分なスペースがない場合は、スクロール可能である中央部問題： タスクを実装しています。フレックスボックスを親のdisplay: flex; flex-direction: column;で使用しています。上部と下部にはflex-shrink: 0; があります。中央の部分はoverlow: autoに設定されています。何らかの理由でInternet Explorer 11にスクロールがありません。オーバーフロープロパティは完全に無視されます。 FirefoxとChromeではうまく動作します。

スクリーンショット：

クローム/ Firefoxの：

インターネットエクスプローラ11：

コード：

.wrapper { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.box { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-width: 300px; 
 
    max-height: 90vh; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 

 
.top, 
 
.bottom { 
 
    flex-shrink: 0; 
 
    padding: 10px; 
 
    background: #ccc;  
 
} 
 

 
.scrollable { 
 
    overflow: auto; 
 
}

<div class="wrapper"> 
 
    <div class="box"> 
 
    <div class="top">I'm any length text</div> 
 
    <div class="scrollable"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eleifend nisi ac laoreet. Praesent commodo bibendum turpis nec finibus. Aenean ac tincidunt velit. Sed et sodales quam, efficitur viverra erat. Pellentesque aliquet ultrices lectus at vulputate. In pulvinar nec ex sed condimentum. Vivamus vitae vulputate urna. Aliquam lobortis iaculis lacus a dictum. Pellentesque odio mauris, tincidunt sit amet sem dapibus, pretium ornare turpis. In sit amet justo luctus, ultricies nisi eu, iaculis erat. Pellentesque et tempor nibh. Vivamus congue elementum elit, id tempus dolor laoreet sed. 
 

 
Vestibulum dictum efficitur metus, in consectetur turpis. Vestibulum vel vehicula ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc congue, odio ac malesuada pharetra, velit nisl facilisis lorem, at tincidunt ex metus volutpat diam. Integer varius dolor at tellus dapibus ultrices. Nulla sagittis purus in mauris vestibulum, ac facilisis turpis condimentum. Ut mattis in ex eu mattis. Nullam ac elit metus. Nullam finibus tempus lacus, sit amet sagittis ante. Morbi sit amet sem a nisi volutpat luctus. Suspendisse eget condimentum dui. Proin suscipit sed sapien a efficitur.  
 
    </div> 
 
    <div class="bottom">I'm any length footer</div> 
 
    </div> 
 
</div>

この問題を解決するためにどのように任意のアイデアはありますか？何が間違っているのか、そしてIEをスクロールさせる方法を教えてください。

Answer 1

を-ms-overflow-style: scrollbar;を使用してみてくださいIEは非常にいくつかのバグがあり、min/max-heightを無視することは、それらの一つです。

この場合、フレックスの列の方向をwrapperに見つけて、align-items: centerを削除してください。

、それは水平方向の中央アライメントさせるbox

ノートに自動マージンを使用するには、これで1つの欠点は、あなたが起動し、手動でブラウザの高さを変更した場合、スクロールは消えませんが、IEに依然として存在していますテキストが収まる場合でも、ページをリロードすると動作します。その問題を取り除くために、何ができるかを見るために、まだこれを調べています。

スタックが

.wrapper { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 
.box { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-width: 300px; 
 
    max-height: 90vh; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
    margin: 0 auto; 
 
} 
 

 
.top, 
 
.bottom { 
 
    flex-shrink: 0; 
 
    padding: 10px; 
 
    background: #ccc;  
 
} 
 

 
.scrollable { 
 
    overflow: auto; 
 
}

<div class="wrapper"> 
 
    <div class="box"> 
 
    <div class="top">I'm any length text</div> 
 
    <div class="scrollable"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eleifend nisi ac laoreet. Praesent commodo bibendum turpis nec finibus. Aenean ac tincidunt velit. Sed et sodales quam, efficitur viverra erat. Pellentesque aliquet ultrices lectus at vulputate. In pulvinar nec ex sed condimentum. Vivamus vitae vulputate urna. Aliquam lobortis iaculis lacus a dictum. Pellentesque odio mauris, tincidunt sit amet sem dapibus, pretium ornare turpis. In sit amet justo luctus, ultricies nisi eu, iaculis erat. Pellentesque et tempor nibh. Vivamus congue elementum elit, id tempus dolor laoreet sed. 
 
    </div> 
 
    <div class="bottom">I'm any length footer</div> 
 
    </div> 
 
</div>

Answer 2

は要素に