Flex と Grid が何年も私を悩ませてきたことがわかったので、次のことを提案します:

リーリー

この動作が必要な場合は、min-width: autoまたはmin-height: autoを使用してください。

実際、ボックス サイズを追加して、すべてのレイアウトをより合理的にすることもできます:

リーリー

何か奇妙な結果があるかどうか知っている人はいますか?上記の方法を組み合わせて数年間使用しましたが、問題はありませんでした。実際、フレックス/グリッドからコンテンツの内側に向かってレイアウトするのではなく、コンテンツから外側に向かってフレックス/グリッドにレイアウトしたいというケースは思いつきません。もちろん、そのようなケースが存在するとしても、それはまれです。 。したがって、これは悪いデフォルトのように感じられます。しかし、もしかしたら私は何かを見逃しているでしょうか？

Flex プロジェクトの自動最小サイズ

Flexbox のデフォルト設定が表示されました。

フレキシブル項目は、主軸に沿ったコンテンツのサイズより小さくすることはできません。

デフォルト値は...

• 最小幅: 自動
• 最小高さ: 自動

...行方向と列方向のそれぞれの伸縮性アイテムの場合。

フレックス項目を次のように設定することで、これらのデフォルトをオーバーライドできます。

• 最小幅: 0
• 最小高さ: 0
• オーバーフロー: hidden(またはvisibleを除くその他の値)

---

フレックスボックス仕様

概要自動値...

＃＃＃言い換えると：＃＃＃

min-width: auto
• およびmin-height: autoデフォルト値は、overflowが表示されている場合にのみ適用されます。#overflow
値が
• 表示されない場合、min-size 属性の値は0です。したがって、overflow: hide
は、
• min-width: 0とmin-height: 0を置き換えることができます。＃＃＃その上...＃＃＃
最小サイズのアルゴリズムはスピンドルにのみ適用されます。

たとえば、行指向コンテナ内の Flex アイテムは、デフォルトでは

min-height: auto

を取得しません。
詳細な手順については、次の投稿を参照してください。
• 曲げ方向: 行と曲げ方向: 列の最小幅は別の方法で表示されます
• min-width: 0 を適用しましたが、プロジェクトはまだ縮小しませんか?

ネストされたフレックスコンテナ

---

HTML 構造の複数のレベルで Flex プロジェクトを操作している場合は、デフォルトの

min-width: auto/min-height: auto

をオーバーライドすることもできます。より高いレベルのアイテム。

基本的に、min-width: autoを持つ上位レベルの Flex プロジェクトは、 code>min-width: 0

を持つ下にネストされたプロジェクトの縮小を防ぎます。

＃＃＃例：＃＃＃Flex アイテムは内容よりも小さく縮小しません

子供を親に合わせる

• 空白の CSS プロパティは Flex で問題を引き起こす可能性があります
ブラウザのレンダリング手順

Chrome と Firefox / Edge

---

少なくとも 2017 年以降、Chrome は (1)

min-width: 0
• /

  min-height: 0のデフォルトに戻すか、(2) に基づいているようです。謎のアルゴリズム0

  デフォルト値が自動的に適用される場合があります。 (これはおそらく、

  介入と呼ばれるものです。)非常に多くの人が、レイアウト (特に必要なスクロールバー) が Chrome では期待どおりに機能しているのを確認していますが、Firefox/Edge ではそうではありません。この問題については、こちらで詳しく説明しています:Flex-shrink の Firefox と Chrome の違いIE11

  仕様に記載されているように、min-widthおよびmin-heightプロパティのauto値は「新規」です。これは、一部のブラウザでは、値を更新する前に Flex レイアウトを実装しており、0がmin0値が表示される可能性があることを意味します。 "http://www.w3.org/TR/CSS2/visudet.html#min-max-widths" rel=" -widthCSS 2.1## ＃。IE11 はそのようなブラウザです。他のブラウザは、フレックスボックス仕様で定義された新しいauto値に更新されました。中定义的 auto

---

修正されたデモ