为什么 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>

只有当文本不换行时，.square 的宽度才会像 flex-basis 属性 设置的那样为 55px；但如果文本超过一行，实际宽度将按比例缩小。那么这背后是什么？以及如何使 .square 区域具有固定宽度（px 或 %），而不管其他 flex 项目包含什么内容？

Answer 1

如果 .text 溢出，

.square 会收缩，因为您没有指定 flex-shrink，默认为 1.

将其设置为 0 以获得所需的结果：

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