父元素flex:1,子元素宽度100%失效的问题

原创于 2021-12-02 10:56:19 发布 · 4.1k 阅读

CC 4.0 BY-SA版权

文章标签：

27 篇文章

订阅专栏

24 篇文章

订阅专栏

本文探讨了在使用flex布局时，如何确保子元素宽度100%生效，并解决了宽度溢出后滚动条不显示的问题。通过设置父元素width:0和使用display:-webkit-box属性，作者提供了有效解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做项目时遇见一个问题，父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写：

.parent{
  flex:1;
  width: 0;
  .children{
    width: 100%;
    overflow-x:scroll ;
  }
}

但同时遇到了另一个问题，我发现这样设置后，即使width超过之后，横向滚动条依然不出现，经过尝试加上一句代码即可：

.parent{
  flex:1;
  width: 0;
  .children{
    width: 100%;
    overflow-x:scroll ;
    display: -webkit-box;
  }
}