Pourquoi une largeur div spécifiée en pixels devient plus petite?

Question

J'ai trois div occupant toute la largeur du conteneur. Les div gauche et droite (devraient) avoir une largeur fixe, comme 300px. Le div principal devrait occuper l'espace restant. Cependant, si le texte dans le div augmente, il augmente de manière à ce que les deux autres div deviennent plus petits que 300 pixels.

CSS

.container { 
    display:flex; 
} 
.main { 
    background:#CCC; 
    width:auto; 
} 
.left { 
    background:#8F8; 
    width:300px; 
} 
.right { 
    background:#F80; 
    width:300px; 
} 

HTML

<div class='container'> 
    <div class='left'> 
    Left 
    </div> 
    <div class='main'> 
    Main with long enough text to occupy more than a line, and a few more just to be sure. 
    </div> 
    <div class='right'> 
    Right 
    </div> 
</div> 

jsFiddle: https://jsfiddle.net/zLLnbo0u/

On peut voir le problème si le droit div ou le texte principal est supprimé: l'augmente automatiquement div gauche (retour à 300 pixels). Comment puis-je obtenir la gauche et la droite div pour être précisément 300 pixels, et le principal div pour occuper l'espace restant, quelle que soit la longueur du texte?

Answer 1

La propriété flex-shrink spécifie le facteur de retrait flexible d'un élément flexible et détermine le retrait de l'élément flexible par rapport au reste des éléments flex du conteneur flexible lorsque l'espace disponible est insuffisant.

Sa valeur par défaut est 1, et comme vous l'avez omis, cela signifie que tous les éléments seront rétrécis de manière égale.

Donc, si vous ajoutez flex-shrink: 0; au left/right, ils garderont leur largeur, la valeur 0 signifie qu'ils ne sont pas autorisés à se rétrécir du tout.

Updated fiddle

Stack snippet

.container { 
 
\t display:flex; 
 
} 
 
.main { 
 
    background:#CCC; 
 
\t width:auto; 
 
} 
 
.left { 
 
    flex-shrink: 0; 
 
    background:#8F8; 
 
\t width:300px; 
 
} 
 
.right { 
 
    flex-shrink: 0; 
 
\t background:#F80; 
 
\t width:300px; 
 
}

<div class='container'> 
 
    <div class='left'> 
 
    Left 
 
    </div> 
 
    <div class='main'> 
 
    Main with long enough text to occupy more than a line, and a few more just to be sure. 
 
    </div> 
 
    <div class='right'> 
 
    Right 
 
    </div> 
 
</div>