Warum wird eine in Pixel angegebene div-Breite kleiner?

Question

Ich habe drei div besetzt die gesamte Breite des Containers. Die linke und rechte div (sollte) eine feste Breite haben, wie 300px. Die Hauptadresse div sollte den verbleibenden Speicherplatz belegen. Wenn jedoch der Text in der Haupt div steigt, wächst es in einer Weise, dass die anderen beiden div kleiner als 300 Pixel werden.

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/

man das Problem sehen, ob die richtige div oder der Haupttext entfernt wird: die linke div automatisch erhöht (zurück bis 300 Pixel). Wie kann ich links und rechts div um genau 300 Pixel zu bekommen, und die Haupt div belegen den verbleibenden Platz, unabhängig von der Textlänge?

Answer 1

Die Eigenschaft flex-shrink gibt den Flex-Schrumpfungsfaktor eines Flex-Elements an und bestimmt, wie stark das Flex-Element im Vergleich zum Rest der Flex-Objekte im Flex-Container schrumpft, wenn nicht genügend Platz vorhanden ist.

Der Standardwert ist 1, und wenn Sie es weggelassen haben, bedeutet dies, dass alle Elemente gleich schrumpfen.

Also, wenn Sie flex-shrink: 0; zum left/right hinzufügen, werden sie ihre Breite halten, da der Wert 0 bedeutet, dass sie gar nicht schrumpfen.

Updated fiddle

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