ピクセルで指定されたdivの幅が小さくなっているのはなぜですか？

Question

私はコンテナの全幅を占める3つのdivを持っています。 div（必ず）は、固定幅を持っています（300pxなど）。メインのdivは残りのスペースを占める必要があります。ただし、メインdivのテキストが増加すると、他の2つのテキストが300ピクセルより小さくなるように大きくなります。

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：バック（左divが自動的に増加：https://jsfiddle.net/zLLnbo0u/

一つは右divまたはメインテキストが削除された場合、問題を見ることができます300ピクセルまで）。 divを正確に300ピクセルにするにはどうすればよいのですか、テキストの長さにかかわらず、メインのdivが残りのスペースを占めるようにするにはどうすればよいですか？

Answer 1

flex-shrinkプロパティは、フレックスアイテムのフレックスシュリンクファクタを指定し、十分なスペースがない場合、フレックスアイテムがフレックスコンテナ内の残りのフレックスアイテムに対してどのくらい縮小するかを決定します。

デフォルトは1です。これを省略すると、すべてのアイテムが均等に縮小されることを意味します。あなたはleft/rightにflex-shrink: 0;を追加する場合は、値0は、それらがすべてで縮小することはできません手段として

だから、彼らは、自分の幅を維持します。

Updated fiddle

スタックありがとう

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