CSS实现div里面的内容超滚动

html代码：

<div class="box">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>

CSS代码：

.box {
margin: 0 auto;
width: 800px;
height: 400px;
background-color: aqua;
overflow: scroll; /*超出部分滚动不换行（overflow-x 横向 overflow-y纵向）*/
white-space: nowrap; /*超出不换行，必须加，否则横向超出部分会自动换行*/
}
.content {
display: inline-block; /*切记不能使用flex*/
background-color: yellowgreen;
margin-left: 50px;
width: 200px;
height: 800px;
}

效果如下：