Question

小提琴：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的宽度将为55px，因为flex-basis属性设置;但如果文本不止一行，则实际宽度将缩小。那么这背后是什么？如何使.square区域具有固定宽度（无论是px还是％），无论其他弹性项目具有什么内容？

Answer 1

.square会因.text溢出而缩小，因为您没有指定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>

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

1 个答案: