<分区>
See problem in codepen: https://codepen.io/pencillrpal/pen/QWLOLGv
我有一个 flex 容器，其中我将有一个水平 slider ，其中的元素与整个页面宽度一样长。
但我意识到我无法控制子元素的宽度，因为它们的宽度始终适合容器，并且不会超出容器。
不过我找到了一个窍门。如果我将我的子 div 一个一个地包装到一个 div 中，它将按我想要的方式工作。
为什么会这样？
.container {
display: flex;
flex-direction: row;
justify-content: center;
height: 40vh;
max-width: 100%;
overflow-x: hidden;
border: 5px solid black;
margin: 0 auto;
}
.box {
position: relative;
width: 90vw;
margin: 10px;
line-height: 10vh;
text-align: center;
background: black;
color: white;
border: 5px solid red;
}
<h1>Box should have 100vw width</h1>
<div class="container">
<div class="box">
<h3>Box</h3>
</div>
<div class="box">
<h3>Box</h3>
</div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<h1>This one has though</h1>
<div class="container">
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
</div>