overflow: scroll and flex centered layout conflicts, top out on the left
When I wrote the style two days ago, I found an interesting problem. Here I use the demo to reproduce it
First, create a container in the parent element. The child elements in the container use flex layout to make them horizontally centered. At this time, we continue to add child elements to make them exceed the maximum width of the parent element, and the parent element has overflow: scroll style.
<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;
}
In my understanding, the rest of the top on the left should be scrollable to the right, but all elements are still centered in the parent element, hidden on the left like overflow: hidden, and scrollable on the right like overflow: scroll. As shown below:
In case of a child element:
When the width of multiple child elements exceeds:
No reason has been found so far, so I am preparing to save the country with a curve. After consulting the information, I found that margin can be used for positioning in the play to solve this problem. Change the style code as follows:
.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;
}
The effect is as follows:
When a child element:
When multiple child elements (beyond the maximum width of the parent element):
Although the desired display method has been realized, I don’t know why flex conflicts with scroll. If anyone knows why this happens, please ask for an answer.
Thank you for watching~