0

設定された高さのヘッダーとフッターを備えたフレックスボックスを作成しようとしており、コンテンツの量に応じてスクロールする場合とスクロールしない場合がある柔軟なコンテンツ領域があります。

ここで私のフィドルを見ることができますhttp://jsfiddle.net/evilbuck/EtQXf/3/

これは FF、chrome では機能しますが、IE10 では機能しません。IE10 はオーバーフロー プロパティを尊重していないようで、以下のコンテンツに流れ込んでいます。

私の期待は、 .content 領域が拡張されて、親の残りのスペースを埋め、必要に応じてスクロールすることです。

<div class="container">
  <header>A header</header>
  <div class="content">Some content that will overflow or not.</div>
  <footer>A footer</footer>
</div>

.container {
    margin: 10px auto;
    width: 300px;
    height: 350px;

    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;

    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
}

header, footer {
    border: 1px solid grey;
    height: 30px;
    padding: 5px;
    text-align: center;
    clear: both;
}



.content {
   flex: 1;
   -webkit-flex: 1;
   -moz-flex: 1;
   -ms-flex: 1;
    overflow: auto;
}

ここで何が間違っていますか？

4

1 に答える 1

0

これは他の人のためにここに残しますが、要するに、使用する必要があったということです

display: -ms-flexbox;

更新されたフィドル: http://jsfiddle.net/EtQXf/4/

于 2013-10-04T23:54:26.683 に答える