如何使用flexbox将溢出的内容包装在一行中

Question

我有一个容器div，其中有许多具有固定宽度的子div。我使用flexbox将子div对齐在一行中。下面的html和css可以工作，除了第一个和最后一个子div仍然溢出容器div

.container {
display: flex;
justify-content: center;
width: 500px;
height: 200px;
background-color: gray;
overflow-x: auto;
}
.child {
margin: 5px;
min-width: 100px;
height: 150px;
background-color: darkgray;
}

<div class="container">
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>

请查看我创建的这个代码笔。

Answer 1

您应该将所有子标签包装到其他标签中，以显示完整的内容，而不会溢出

.container {
display: flex;
width: 500px;
height: 200px;
overflow: auto;
}
.flex-box {
display: flex;
justify-content: center;
background-color: gray;
flex: 1;
}
.child {
margin: 5px;
min-width: 100px;
height: 150px;
background-color: darkgray;
}

<div class="container">
<div class="flex-box">
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
</div>