Pourquoi les éléments flexibles ne sont-ils pas réduits au-delà de la taille du contenu ?
<p>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. </p>
<p>J'ai essayé d'utiliser <code>word-break:break-word</code> et cela m'a aidé, mais lorsque j'ai redimensionné la colonne à 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. </p>
<p>Regarder cette vidéo
(Au départ, 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) </p>
<p>Je sais, réduire la taille de la police et le remplissage des colonnes serait utile... mais existe-t-il une autre solution ? </p>
<p>Je ne peux pas utiliser <code>overflow-x:hidden</code>. </p>
<p>JSFiddle</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.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></pre>
<p><br /></p>
