Flex 布局下子元素宽度失效？如何解决？

父元素使用 flex，子元素 width 失效？

在项目中使用 flex 布局时，发现第一个子元素的 width 无效，而在 jsfiddle 中却正常运行。

代码如下：

<p style="width: 100px;">
  <p class="box">
    <p class="status"></p>
    <p class="text">天津饭饭天津饭饭</p>
    <button class="btn">测试</button>
  </p>
</p>

登录后复制

.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 布局下子元素宽度失效？如何解决？的详细内容，更多请关注抖狐科技其它相关文章！