子 div 并非全部显示在父容器中

Question

为什么当给出一个display: flex和一个justify-content: center时，子项目不都出现在父div中?

我有15个子divHTML

<div class="container">
<div class="dv">1</div>
<div class="dv">2</div>
<div class="dv">3</div>
<div class="dv">4</div>
<div class="dv">5</div>
<div class="dv">6</div>
<div class="dv">7</div>
<div class="dv">8</div>
<div class="dv">9</div>
<div class="dv">10</div>
<div class="dv">11</div>
<div class="dv">12</div>
<div class="dv">13</div>
<div class="dv">14</div>
<div class="dv">15</div>  
</div>

当给定一个justify-content: center时，列表开头的div会消失css

.container{
display: flex;
align-items: center;
justify-content: center;
height: 90%;   
overflow: auto;
white-space: pre-line; 
border: 10px solid rgb(70, 70, 199);  
width: 500px; 
height: 500px;
background-color: blue;  
}
.dv{
margin: 19px;
padding: 10px;
height: 90%;    
background-color: white;
border: solid 1px black;
border-radius: 10px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
color: black;
width: 500px; 
height: 400px;  
}

Answer 1

显然，子div的总宽度不应该超过包含父div的宽度，为了处理这种情况，我们使用flex-wrap属性