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

【问题标题】：why is flex-basis property getting overridden?为什么 flex-basis 属性被覆盖？
【发布时间】：2017-04-04 16:56:42
【问题描述】：

小提琴：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 还是 %），而不管其他 flex 项包含什么内容？

【问题讨论】：

我很困惑...您希望最终结果是什么样的？
我只希望 .square 为父宽度的 20%，将其设置为 '55px' 只是为了演示。
所以不能设置“20%”？ - jsfiddle.net/y8d2q3ww/5我还是一头雾水。
这不是 20%，而是 69/432 = 15.9%
您引用的值发生了变化...但是您的 Jquery 不会返回更新后的值。如果您重新调整窗口大小，您可以看到它的大小发生变化，-jsfiddle.net/y8d2q3ww/6

标签： css flexbox

【解决方案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>

【讨论】：