父元素使用 flex，子元素 width 失效？
在项目中使用 flex 布局时，发现第一个子元素的 width 无效，而在 jsfiddle 中却正常运行。
代码如下：
<div style="width: 100px;"> <div class="box"> <div class="status"></div> <div class="text">天津饭饭天津饭饭</div> <button class="btn">测试</button> </div> </div>
.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 后，子元素就不会自动缩放。
