Flex子项滚动条适配问题：如何让滚动条正确显示在指定容器

这个问题我之前也碰到过，其实是flex布局的一个默认特性在搞鬼～

为什么会出现这个情况？ #

在flex布局里，flex项目（也就是你的.content容器）默认的min-width属性值是auto。这个规则意味着flex项目会尽可能地容纳它内部的内容，哪怕这个内容的尺寸已经超出了父容器的可用空间。

所以当你的.large元素宽度设为1000px时，.content会被这个超大元素直接撑开，宽度变成1000px，再加上.aside的100px、父容器的padding和元素间的margin，总宽度远远超过了父容器的400px，自然就会在父容器底部出现水平滚动条，而不是.content自己出现滚动条。

怎么解决？ #

只需要给.content加上min-width: 0，打破这个默认的最小宽度限制，让它能够遵守flex: 1的规则，老老实实占据父容器剩下的宽度。这样内部的超大元素就会被.content的边界限制住，触发.content的overflow: auto，滚动条就会出现在.content里了。

修改后的CSS代码如下：

.p { 
  display: flex; 
  background: blue; 
  padding: 10px; 
  overflow: auto; 
  width: 400px; 
  height: 300px; 
} 
.aside { 
  background: green; 
  flex: 0 0 100px; 
  margin-right: 10px; 
} 
.content { 
  /* 去掉固定宽度的计算，加上min-width:0 */
  min-width: 0;
  padding: 10px; 
  background: purple; 
  flex: 1 0 auto; 
  overflow: auto; 
} 
.large { 
  background: orange; 
  width: 1000px; 
  height: 800px; 
}

这样修改后，不管父容器的尺寸是固定还是动态计算的，.content都会自适应剩余宽度，内部的大内容也只会让.content出现滚动条，完全符合你的预期效果。

内容的提问来源于stack exchange，提问作者Alexander Chen