web-dev-qa-db-ja.com

MicrosoftEdgeブラウザーはネストされたフレックスの子を壊します

flexboxを使用して、シンプルでエレガントなフレックスボックスベースのレスポンシブレイアウトを作成しています。HTMLの例を次に示します。

<div class="box">
  <section class="box concise">
    <div class="box">
      this is just for test
    </div>
  </section>
  <!-- I can add more sections here,
      to serve as "cards", for example -->
</div>

スタイルは次のとおりです。

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>* {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.box>.concise {
  flex-basis: auto;
  flex-grow: 0;
}

flex-basis: 0; flex-grow: 1; max-width: 100%;の目的は、すべてのフレックスの子のデフォルトのスタイルシートです。これにより、各フレックスの子はコンテンツに必要なだけ大きくなりますが、幅を埋め、必要に応じて折り返します。それはうまく機能します。

オプションのflex-basis: auto; flex-grow: 0;は、フレックスの子を以前のように必要な場合にのみ成長させ、それより大きくは成長させないようにします。基本的に、フレックスアイテムをコンテンツの周りにシュリンクラップします。

<section>を使用して、必要な場合を除いて成長しない「カード」を区別します。

section {
  background-color: white;
  border: 1px solid black;
}

それはFirefoxとChromeで美しく見えます。ただし、Microsoft Edge 42.17134.1.0（EdgeHTML 17.17134）では完全に機能しません。エッジでは、カードに使用している<section>は、通常の流れから浮いているかのように、完全に縮小します。 <section>の範囲外で、コンテンツは引き続き表示されます。ここで試すことができます：

https://jsfiddle.net/garretwilson/wgo8rqxf/4/

内側の<div>のflexプロパティを変更することで（上記のconciseスタイルクラスを使用して）、Edgeでこの問題を回避できます。

<div class="box">
  <section class="box concise">
    <div class="box concise">
      this is just for test
    </div>
  </section>
</div>

ただし、このconciseスタイルを手動で追加することは、実行可能な解決策ではありません。 Edgeで破損しないようにするためだけに、子フレックスプロパティを手動で変更することはできません。さらに、それは子供たちの行動を変えるでしょう。たとえば、<section>に幅を設定した場合、その子がスペースを埋めるようにします。

これはフレックスの子に関する既知のエッジバグですか？内側の<div>は、そのコンテンツの必要に応じて成長するべきではありませんか？

そして、同じように重要なことですが、generalの回避策を知っていますか？ HTML自体に任意のマークアップまたはスタイルを追加しますか？

cssflexboxmicrosoft-edge
7
Garret Wilson

この問題の解決策は実際には非常に簡単です。しかし、その説明はそれほど多くはありません。

ソリューション

flex-basisで単位のない値を使用しないでください。 Microsoftブラウザ（IEおよびEdge）のフレックスレイアウトを壊します。

これの代わりに、あなたはあなたのコードに持っています：

.box > * {
  flex-basis: 0;
}

これを使って：

.box > * {
  flex-basis: 0%;
}

それは問題を解決します。

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>* {
  flex-basis: 0%;  /* adjustment */
  flex-grow: 1;
  max-width: 100%;
}

.box>.concise {
  flex-basis: auto;
  flex-grow: 0;
}

section {
  background-color: white;
  border: 1px solid black;
}
<div class="box">
  <section class="box concise">
    <div class="box">
      this is just for test
    </div>
  </section>
</div>

説明

flexbox仕様 によると、flex-basisプロパティで単位のない値を使用しても問題はありません。

ただし、実際には、IEおよびEdgeでは、このような値のレンダリングに問題があります。

問題はこれらの投稿で調査されます：

したがって、IEおよびEdgeで機能する安全なクロスブラウザの代替手段として、flex-basisで単位のない値を使用しないでください。これは両方のflex-basisに長い間適用されます-handプロパティおよびflexプロパティのコンポーネントとして。

8
Michael_B

Edgeには、フレックスラップではなくフレックスフローを使用する必要があります。

0
jorge soares