父元素使用 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 后，子元素就不会自动缩放。
以上就是Flex 布局下子元素宽度失效？如何解决？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
230
收藏
