overflow: scroll和flex居中布局冲突,左侧顶出
前两天写样式的时候发现了一个有趣的问题,这里使用demo复现一下
首先在父元素中创建一个容器,容器中子元素使用flex布局使其水平居中定位,此时我们继续添加子元素,使其超出父元素的最大宽度,而父元素中有overflow: scroll的样式。
<div class="container">
<div class='bigBox'>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
.container {
display: flex;
width: 500px;
height: 300px;
align-items: center;
background: pink;
overflow: scroll;
justify-content: center;
}
.bigBox {
border: 2px solid red;
height: 200px;
display: flex;
}
.item {
width: 300px;
height: 180px;
border: 10px solid green;
background-color: orange;
}
在我的理解中,应该会左侧顶头剩下的可向右滚动,可是却出现了所有元素仍在父元素中居中,左侧隐藏类似overflow: hidden,右侧可滚动类似overflow: scroll。如下图:
一个子元素的情况下:
多个子元素宽度超出的情况下:
至今没有找出原因,于是准备曲线救国。查阅资料后发现可以使用margin来进行剧中定位来解决这种问题。更改样式代码如下:
.container {
margin: auto;
display: flex;
width: 500px;
height: 300px;
align-items: center;
background: pink;
overflow: scroll;
}
.bigBox {
border: 2px solid red;
height: 200px;
margin-left: auto;
margin-right: auto;
display: flex;
}
.item {
width: 300px;
height: 180px;
border: 10px solid green;
background-color: orange;
}
效果如下:
一个子元素时:
多个子元素时(超出父元素最大宽度):
虽然是实现了想要的展示方式,但不知道为何flex会和scroll冲突,如果有大佬知道为何会出现这种情况,求解答。
扫描二维码关注公众号,回复:
15686386 查看本文章
谢谢观看~