父元素使用 flex，子元素 width 失效？
在项目中使用 flex 布局时，发现第一个子元素的 width 无效，而在 jsfiddle 中却正常运行。
代码如下：
天津饭饭天津饭饭
.box {
display: flex;
align-items: center;
}
.status {
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
background-color: rgb(209, 48, 15);
}
.text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.btn {
transform: scale(0.6);
}在项目中，第一个元素的 width 失效，而在 jsfiddle 中正常。这是因为在极端情况下，flex 布局会导致变形。为了解决这个问题，需要使用 flex: none。
添加 flex: none 后，子元素就不会自动缩放。
