web-dev-qa-db-ja.com

Flexbox Internet Explorer 11で動作していません

このコードは、Firefox、Chrome、およびEdgeでは正常に機能しますが、明らかにflexモデルのためにIE11では正しく機能しません。どうすれば修正できますか？

これはFirefoxでどのように見えるかです

enter image description here

これはIE11でどのように見えるかです

enter image description here

body * {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-flow: column;
  margin: 0;
}
main {
  flex: 1;
  display: flex;
}
header,
footer {
  background: #7092BF;
  border: solid;
  width: 100%;
}
section {
  border: solid;
  background: #9AD9EA;
  flex: 1
}
aside {
  border: solid;
  width: 150px;
  background: #3E48CC
}
<header>
  <p>header
</header>
<main>
  <aside>
    <p>aside
    <p>aside
  </aside>
  <section>
    <p>content
    <p>content
    <p>content
    <p>content
  </section>
</main>
<footer>
  <p>footer
  <p>footer
</footer>
htmlcsscss3internet-explorerflexbox
25
J. Doe

Flexbugs によると：

IE 10-11では、フレックスコンテナのmin-height宣言はコンテナ自体のサイズを調整するために機能しますが、フレックスアイテムの子は親のサイズを認識していないようです。高さがまったく設定されていないかのように動作します。

回避策は次のとおりです。

1.常にビューポートとスクロール可能な<aside>および<section>を埋めます：

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

header,
footer {
  background: #7092bf;
}

main {
  flex: 1;
  display: flex;
}

aside, section {
  overflow: auto;
}

aside {
  flex: 0 0 150px;
  background: #3e48cc;
}

section {
  flex: 1;
  background: #9ad9ea;
}
<header>
  <p>header</p>
</header>

<main>
  <aside>
    <p>aside</p>
  </aside>
  <section>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </section>
</main>

<footer>
  <p>footer</p>
</footer>

2.最初にビューポートを埋め、通常のページスクロールをさらにコンテンツで埋めます。

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

header,
footer {
  background: #7092bf;
}

main {
  flex: 1 0 auto;
  display: flex;
}

aside {
  flex: 0 0 150px;
  background: #3e48cc;
}

section {
  flex: 1;
  background: #9ad9ea;
}
<header>
  <p>header</p>
</header>

<main>
  <aside>
    <p>aside</p>
  </aside>
  <section>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </section>
</main>

<footer>
  <p>footer</p>
</footer>
28
Stickers

IE11 Flexboxバグなどの完全なリストについては、「使用できます」を参照してください。

IE11およびその他のブラウザーには、多数のFlexboxバグがあります。 Flexbox on Can I Use ->既知の問題を参照してください。

  • IE 11では、3番目の引数であるflex-basisプロパティにユニットを追加する必要があります
  • IE10およびIE11では、display: flexおよびflex-direction: columnを含むコンテナは、コンテナにmin-heightが含まれるが明示的なheightプロパティが含まれていない場合、その柔軟な子のサイズを適切に計算しません
  • IE 11は、min-heightが使用されている場合、アイテムを垂直方向に正しく整列しません。

Philip Waltonの Flexbugs の問題と回避策のリストも参照してください。

17
Dave Everitt

flexboxを使用して完全なレイアウトをテストしました。ヘッダー、フッター、メインパネル（左、中央、右パネル）を含み、パネルにはメニュー項目またはフッターとスクロールするヘッダーを含めることができます。かなり複雑

IE11およびIE Edgeでさえ、フレックスコンテンツの表示に問題がありますが、それは克服できます。ほとんどのブラウザでテストしましたが、うまくいくようです。

IE11の高さのバグ、html/bodyにheight：100vhおよびmin-height：100％を追加するという修正が適用されます。これは、domのコンテナに高さを設定する必要がないことにも役立ちます。また、body/htmlをフレックスコンテナにします。それ以外の場合、IE11はビューを圧縮します。

html,body {
    display: flex;
    flex-flow:column nowrap;
    height:100vh; /* fix IE11 */
    min-height:100%; /* fix IE11 */  
}

フレックスコンテナをオーバーフローさせるIEエッジの修正：メインフレックスコンテナのoverflow：hidden。オーバーフローを削除すると、IE Edge wilコンテンツをフレックスメインコンテナ内に含めるのではなく、ビューポートからプッシュします。

main{
    flex:1 1 auto;
    overflow:hidden; /* IE Edge overflow fix */  
}

enter image description here

codepen ページで私のテストと例を見ることができます。重要なcssの部分に適用した修正を加えて、誰かがそれを役立ててくれることを願っています。

10
Plippie