flex布局子元素flex：1会动态变化？

Question

.container{display: flex;width: 120px;}
.box{flex:1;height:30px;background: red;margin: 3px;overflow: hidden;
     text-overflow: ellipsis; white-space: nowrap;}
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

一开始设置好好的，但是一添加文字就宽度就动态变化了，如何让他不变化，一直保持初始化的宽度

Answer 1

flex: 1 0;
你可以简单理解为第一个参数表示是否放大，第二个参数表示是否缩小。

Answer 2

flex: 1是flex-grow的简写

https://developer.mozilla.org...

Answer 3

因为文本长度超过了flex:1的宽度，所以盒子会被撑开，要想盒子长度保持不变，
可以加上flex-shrink:0来指定flex元素的收缩规则