flex布局中,自适应容器在其内容有固定宽度时无法缩小

386 阅读1分钟

问题

flex布局中,右边容器固定宽度,左边容器自适应宽度,左边容器中的内容需要做溢出展示滚动条,当左边缩小到一定程度时,就不会再缩小了,无法出现滚动条。

就像这个链接中的内容一样:codepen.io/catmiao8/pe…

解决方案

在左边自适应的容器上加上:min-width: 0

解决后的亚子:codepen.io/catmiao8/pe…

原因

默认情况下,弹性项目不会缩小到其最小内容大小以下。也就是说项目的最小宽度是其内容的宽度,并且不会缩小超过该宽度。当需要做溢出处理时,需要设置min-width: 0,这样才能正确的调整比例大小

参考文章