为什么flex-basis属性被覆盖？

Question

Fiddle: http://jsfiddle.net/y8d2q3ww/2/

.flex-container{display:flex;width:100%}
.square{flex-basis:55px;background:yellow}

<div class='flex-container'>
    <div class="square">M</div>
    <div class="text">some text some text some text some text some text some text some text some text </div>    
</div>

Only when the text doesn't wrap, the .square's width will be 55px as the flex-basis property sets; but if the text is more than one line, the actual width will be scaled down. So what is behind this? And how do I make the .square area have a fixed width(be it px or %) no matter what content the other flex items hold?

Answer 1

.square shrinks if .text overflows, because you did not specify flex-shrink , which defaults to 1.

Set it to 0 to get the desired result:

 .flex-container { display: flex; width: 100% } .square { flex-basis: 20%; flex-shrink: 0; background: yellow } 

 <div class='flex-container'> <div class="square">M</div> <div class="text">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text</div> </div>