Je trouve que Flex et Grid me dérangent depuis des années, alors voici ce que je suggère :

* { min-width: 0; min-height: 0; }

Ensuite, si vous avez besoin de ce comportement, utilisez simplementmin-width: auto或min-height: auto.

En fait, vous pouvez également ajouter des tailles de boîtes pour rendre toutes les mises en page plus logiques :

* { box-sizing: border-box; min-width: 0; min-height: 0; }

Est-ce que quelqu'un sait s'il y a des conséquences étranges ? Je n'ai eu aucun problème depuis quelques années en utilisant un mélange des méthodes ci-dessus. En fait, je ne vois aucun cas où je voudrais mettre en page le contenu vers l'extérieur dans le Flex/Grid, plutôt que de le mettre en page depuis le Flex/Grid vers l'intérieur dans le contenu --- bien sûr, s'ils existent, ils sont rares. . Cela ressemble donc à un mauvais défaut. Mais peut-être qu'il me manque quelque chose ?

Taille minimale automatique pour les projets Flex

Vous rencontrez les paramètres par défaut de Flexbox.

Les éléments Flex ne peuvent pas être plus petits que la taille de leur contenu le long de l'axe principal.

La valeur par défaut est...

• 最小宽度：自动
• 最小高度：自动

... éléments flexibles pour les directions de ligne et de colonne respectivement.

Vous pouvez remplacer ces valeurs par défaut en définissant l'élément flexible sur :

• 最小宽度：0
• 最小高度：0
• 溢出：隐藏（或任何其他值，可见Sauf)

Spécifications Flexbox

À propos deautovaleur...

En d'autres termes :

Applicable lorsque
• min-width: auto和min-height: auto默认值仅在overflow可见.
• Sioverflow值不可见，则min-size属性的值为0.
• Par conséquent,overflow: hide可以替代min-width: 0和min-height: 0.

Aussi...

• L'algorithme de taille minimale ne fonctionne que sur les broches.
• Par exemple, les éléments Flex dans des conteneurs orientés lignes ne reçoivent pasmin-height: autopar défaut.
• Pour des instructions plus détaillées, consultez cet article :
  • La largeur minimale du sens de pliage : rangée et le sens de pliage : colonne sont présentés différemment

Vous avez appliqué min-width: 0 mais le projet ne rétrécit toujours pas ?

Conteneurs flexibles imbriqués

Si vous travaillez avec des projets Flex sur plusieurs niveaux de la structure HTML, vous souhaiterez peut-être remplacer la valeur par défautmin-width: auto/min-height: auto code> sur les projets de niveau supérieur.

Fondamentalement, avoir un élément Flex de niveau supérieur avecmin-width: auto的更高级别的 Flex 项目可以防止使用min-width: 0empêche les éléments imbriqués ci-dessous avec

• Les articles flexibles ne rétrécissent pas plus petits que leur contenu
• Faites en sorte que l'enfant s'adapte au parent
• Les propriétés CSS vides peuvent causer des problèmes avec Flex

• Chrome contre Firefox / Edge

  Depuis au moins 2017, Chrome semble (1) revenir àmin-width: 0/min-height: 0默认值，或者 ( 2) 基于神秘算法在某些情况下自动应用0par défaut. (C'est probablement ce qu'ils appellentintervention.) En conséquence, de nombreuses personnes voient leurs mises en page (en particulier les barres de défilement requises) fonctionner comme prévu dans Chrome, mais pas dans Firefox/Edge. Ce problème est traité plus en détail ici :différences flex-shrink entre Firefox et Chrome

• IE11

  Comme indiqué dans la spécification, la valeurautopour les propriétésmin-widthetmin-heightest "nouvelle". Cela signifie que certains navigateurs peuvent toujours afficher la valeur0par défaut car ils implémentent la disposition Flex avant de mettre à jour la valeur, et0estmin Valeurs initialesCSS2.1min-width和min-height属性的auto值为“新”。这意味着某些浏览器默认情况下仍可能呈现0值，因为它们在更新该值之前实现了 Flex 布局，并且0是min 的初始值CSS 2.1。IE11 就是这样的浏览器。其他浏览器已更新到较新的flexbox 规范中定义的 auto.IE11 est un tel navigateur.

  D'autres navigateurs ont été mis à jour vers unflexbox auto valeur définie dans la spécification.

.container { display: flex; } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px; min-width: 0; /* NEW */ } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } .col4 { flex: 4; background: red }

 
Lorem ipsum dolor
 
Lorem ipsum dolor
 
Lorem ipsum dolor
 
Lorem ipsum dolor