J'ai constaté que cela m'a causé des problèmes à plusieurs reprises au cours des dernières années, tant pour le flex que pour la grille, je suggère donc ce qui suit :

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

Si vous avez besoin de ce comportement, utilisez simplement min-width: auto或min-height: auto.

En fait, vous pouvez également ajouter des dimensions de boîte pour rendre toutes les mises en page plus raisonnables :

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

Est-ce que quelqu'un sait s'il y a des conséquences étranges ? Depuis plusieurs années d'utilisation de la méthode ci-dessus, je n'ai eu aucun problème. En fait, je ne peux penser à aucune situation dans laquelle je voudrais mettre en page du contenu vers l'extérieur en flex/grid, plutôt que de flex/grid vers l'intérieur en contenu --- et si une telle situation existe, elle est certainement rare. 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 sur l'axe principal.

Le paramètre par défaut est...

• min-width: auto
• min-height: auto

...Applicable aux éléments flexibles respectivement dans le sens des lignes et des colonnes.

Vous pouvez définir l'élément flexible sur :

• min-width: 0
• min-height: 0
• overflow: hidden（或任何其他值，除了visible)

Spécifications Flexbox

À propos de autovaleur...

En d'autres termes :

• min-width: auto和min-height: auto默认仅在overflow为visible et
ne sont applicables par défaut que lorsque overflow est visible.
• overflow的值不是visible，则min-size属性的值为0Si
.
• overflow: hidden可以替代min-width: 0和min-height: 0Par conséquent, overflow: Hidden peut remplacer
et

et...
• L'algorithme de taille minimale ne fonctionne que sur les broches. min-height: auto
Par exemple, les éléments flexibles dans des conteneurs orientés lignes ne reçoivent pas
• par défaut.
  • Pour une explication plus détaillée, voir cet article :
  min-width est rendu différemment dans flex-direction: row et flex-direction: column

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

min-width: auto / min-height: auto

/min-width: auto的较高级别flex项目可以阻止下方嵌套的具有min-width: 0 sur les éléments de niveau supérieur.

Fondamentalement, un élément flexible de niveau supérieur avec

de rétrécir.
• Exemple :
• Les éléments flexibles ne peuvent pas être réduits à une taille inférieure à leur contenu
• Adapter les éléments enfants aux éléments parents

• Considérations relatives au rendu du navigateur

  min-width: 0 / min-height: 0的默认值，要么（2）根据某个神秘的算法在某些情况下自动应用0Chrome contre Firefox/Edge Depuis 2017, Chrome semble (1) revenir à la valeur par défaut de / ou (2) appliquer automatiquement la valeur par défaut de 0 dans certaines situations en fonction d'un algorithme mystérieux. (C'est probablement ce qu'ils appellent

  intervention🎜🎜.) En conséquence, de nombreuses personnes voient leurs mises en page (en particulier les barres de défilement souhaitées) fonctionner comme prévu dans Chrome, mais pas dans Firefox/Edge. Pour des informations plus détaillées, voir ici : 🎜différences flex-shrink entre Firefox et Chrome🎜🎜

• IE11

  Comme indiqué dans la spécification, la valeur min-width和min-height属性的auto值是“新的”。这意味着某些浏览器可能仍然默认呈现0值，因为它们在值更新之前实现了flex布局，并且因为0是CSS 2.1中min-width和min-height的初始值。IE11是其中之一。其他浏览器已经更新到了在flexbox规范中定义的较新的auto.

Démo révisée

.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
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>