我遇到了特定于 Firefox 的问题(据我所知)。
在 Chrome 中,如果你有
flex: 0 0 auto;
overflow: auto;
当 y 方向溢出时,它会占用滚动条的额外宽度,一切都很好。但在 Firefox 中,它不会考虑额外的宽度,并且也会使内容在 x 方向溢出。
我准备了一支笔来演示这个问题:
https://codepen.io/anon/pen/JEMyPm https://codepen.io/anon/pen/JEMyPm
firefox:
chrome:
任何建议/解决方法都会很棒!
编辑:flex-grow: 1 (1 1 auto) 可以解决这个问题,使容器通过增长来响应其周围的额外空间。如果您不希望元素增长并且只与内部内容一样宽怎么办?
请用flex: 1 1 auto
代替0 0 auto
,因为它根据项目的大小调整项目的大小width/height
属性,但使其完全灵活,以便它们吸收沿主轴线的任何额外空间。定义如下:
.child {
flex: 1 1 auto;
width: 50px;
height: 50px;
background: #000;
color: #fff;
margin: 8px;
text-align: center;
line-height: 50px;
border: 3px solid #4d4d50;
border-radius: 2px;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)