Pourquoi les éléments flexibles ne peuvent-ils pas être réduits à une taille inférieure à la taille du contenu ?

Question

J'ai 4 colonnes flexbox et tout fonctionne bien, mais lorsque j'ajoute du texte à une 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 j'ai redimensionné les colonnes à une très petite largeur, les lettres du texte étaient divisées en plusieurs lignes (une lettre par ligne), mais la largeur de la colonne ne sera pas inférieure à la taille d'une lettre.

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

Je sais que définir la taille de la police et le remplissage des colonnes sur des valeurs plus petites aidera... mais existe-t-il une autre solution ?

Je ne peux pas utiliser overflow-x: Hidden.

JSFiddle

.container {
  affichage : flexible ;
  largeur : 100%
}
.col {
  hauteur minimale : 200 px ;
  remplissage : 30 px ;
  saut de mot : briser le mot
}
.col1 {
  flexion : 1 ;
  fond : orange ;
  taille de la police : 80px
}
.col2 {
  flexion : 3 ;
  fond : jaune
}
.col3 {
  flexion : 4 ;
  fond : bleu ciel
}
.col4 {
  flexion : 4 ;
  fond : rouge
}</pré>
<pre class="brush:html;toolbar:false;"><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

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 ?

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 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 ?

Conteneurs flexibles imbriqués

min-width: auto / min-height: auto

Si vous travaillez avec des éléments flexibles sur plusieurs niveaux de votre structure HTML, vous souhaiterez peut-être remplacer la valeur par défaut

/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

empêche l'élément imbriqué ci-dessous 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

---

La propriété CSS des espaces blancs est en conflit avec la mise en page flexible

• 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>