今度はIEがcss flexで勝利を取り戻すことができるでしょうか？ _html/css_WEB-ITnose

わあ、わあ、今年最初の記事です、シーンをコントロールするために特別にこのタイトルを付けました。そうです、それは見出しをつかむものです。

事は先週の金曜日から始めなければなりません。その日の午後、私は会社でその女の子が提起した製品要件を変更していました。しばらく変更を加えた後、効果を確認し、いくつかの単元を実行するために Chrome に切り替えました。はははは。しかし、突然問題が発生しました。flex項目が正しく表示されず、FFでもChromeでも「間違っている」と表示されましたが、IE11では「正常」と表示されました。

通常、HTML と CSS コードは次のとおりです。

でも今はこんな感じです、 ↓↓↓

これを見て最初に頭に浮かんだのは、2番目の選択ボックスの選択肢が多すぎるということでした。ただし、3 つのフィルター項目のフレックス値はすべて 1 であり、標準の 3 つの等しい部分である flex: 1 1 0 に対応します。当時は時間が迫っていたので、select に max-width 属性を書いたのですが、とりあえずは大丈夫そうです。

しかし、週末に家で考えてみると、これは問題ではありません。自分の制御下にないこのようなスタイルの出現をどうやって許容できますか。で、仕様書を読み直してみたら、ははは、顔が痛い。

突然、この状況が以前 Firefox で発生したことが頭に浮かびました。そのとき、私は stackoverflow で見つけた解決策に min-width: 1px; を追加しました。しかし、この状況はChromeとFFの両方で発生したため、バグなのかどうか疑問に思い、キーワードで検索しました、ははは。

リンクはここです:

それをたどってここを見つけました:

リンクはここです:

ははは、FF と Chrome の flex アイテムの min-width の初期値は auto になりました。公式の説明は次のとおりです:

フレックス アイテムのより適切なデフォルトの最小サイズを提供するため。 、この仕様では、CSS 2.1 で定義されている min-width プロパティと min-height プロパティの初期値として、新しい auto 値が導入されています。フレックス アイテムの主軸 min に指定されている場合、主軸にオーバーフローが表示されるフレックス アイテム上で- size プロパティ。次の表は最小サイズを示します...

上の段落は blabla です。つまり、フレックス項目のオーバーフロー属性値が表示される場合、min-width と min-高さの初期値は auto です。最終的に auto がどのように計算されるかについては、指定されたサイズ、転送されたサイズ、コンテンツのサイズに基づいていくつかの規則に基づいて計算されます。興味がある場合は、公式ドキュメントを参照してください。私が書いたページでは、最終的な計算はコンテンツ サイズであり、公式の説明を投稿しました:

コンテンツ サイズは、主軸の最小コンテンツ サイズです (固定されている場合)。アスペクト比。アスペクト比を通じて変換された明確な最小および最大クロス サイズ プロパティによって決定され、それが明確である場合は最大メイン サイズ プロパティによってさらにクランプされます

したがって、ここでは確かに 2 番目の選択肢になります。ある選択肢の文章が長すぎるのでバグではありません、ははは。

解決策は、flex-item の表示属性を非表示の正当な値に設定するか、min-width または min-height 値を auto 以外の他の正当な値に手動で設定することです。

ついでに CSS の何かを github に載せておきます。