Pourquoi les éléments flexibles ne peuvent-ils pas être réduits en dessous de la taille du contenu ?

Question

J'ai 4 colonnes Flexbox et tout fonctionne bien, mais lorsque j'ajoute du texte à la colonne et que je la règle sur une grande taille de police, la colonne est plus large qu'elle ne devrait l'être en raison de la propriété Flex.

J'ai essayé d'utiliser word-break:break-word et cela m'a aidé, mais lorsque je redimensionne la colonne à une très petite largeur, les lettres du texte sont divisées en plusieurs lignes (une lettre par ligne), et la largeur de la colonne ne devient jamais inférieure à une. La taille des lettres.

Regardez cette vidéo (Au début, la première colonne est la plus petite, mais lorsque je redimensionne la fenêtre, c'est la colonne la plus large. Je veux juste toujours respecter les paramètres Flex ; taille Flex 1:3:4:4)

Je sais, réduire la taille de la police et le remplissage des colonnes aiderait... mais existe-t-il une autre solution ?

Je ne peux pas utiliser overflow-x:hidden.

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.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>

Answer 1

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 simplement min-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 peux penser à 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 ?

Answer 2

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 de autovaleur...

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 pas min-height: auto par défaut.
• Pour des instructions plus détaillées, veuillez consulter 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éfaut min-width: auto / min-height: auto code> sur les projets de niveau supérieur.

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

min-width : 0 de rétrécir.

Exemple :

• 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

---

Instructions de rendu du navigateur

• 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 appellent intervention.) 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 valeur auto pour les propriétés min-width et min-height est "nouvelle". Cela signifie que certains navigateurs peuvent toujours afficher la valeur 0 par défaut car ils implémentent la disposition Flex avant de mettre à jour la valeur, et 0 est min Valeurs initiales CSS2.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 un flexbox auto valeur définie dans la spécification .

---

Démo modifié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>