父元素使用 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 后，子元素就不会自动缩放。
以上就是Flex 布局下子元素宽度失效？如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1498339.html
微信扫一扫 
支付宝扫一扫 
