overflow和flex搭配导致子元素缩小问题

JuneTT

于 2024-07-02 18:12:01 发布

阅读量199

点赞数 3

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/CZDBGSY/article/details/140133428

版权

这段代码没加overflow-y前子元素会正常显示。加了后会被挤压，因为overflow后盒子bfc导致.content盒子被flex:1 定高到100%;无法被子元素撑开，也会挤压子元素；将子元素flex-shrink设置为0即可

 .content{
      display: flex;
      flex-direction: column;
      flex: 1;
      box-sizing: border-box;
      padding:20px 50px;
      gap: 20px;
      overflow-y:auto;
      .item{
        display: flex;
        height: 70px ;
        flex-shrink: 0;
        background-color: rgba(248,248,248,1);
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 40px;
      }
}