flex布局下overflow失效问题

Posted 2020-12-03 wuxianqiang

经常我们会使用flex布局，但是flex布局常常会遇到一些不可思议的麻烦，下面介绍一下overflow遇到的麻烦

 

我在工作中使用了左右两栏布局

.container {
    display: flex;
}
.left {
    flex: 1;
    overflow: auto;
}
.right {
    width: 500px;
}

 

我的想法是左边宽度要自适应，而且需要滚动条，虽然这样设置了，但奇怪的事情发生，左边的内容并没有出现滚动条，通过查阅资料，可以通过如下办法解决

.container {
    display: flex;
}
.left {
    flex: 1;
    overflow: auto;
    width: 0;
}
.right {
    width: 500px;
}

 

样式需要多加一个 width: 0;