Html 当元素到达窗口宽度时，如何保持元素相邻放置，而不打断新行？

HTML:

我希望这些盒子彼此相邻，即使它们在容器外的x轴上溢出

我试着将.content width设置为一个很大的数字，但肯定还有其他方法

---

您只需添加

空白：nowrap

.container{
宽度：100%；
溢出-x：滚动；
}
.内容{
空白：nowrap；
}
.盒子{
边框：1px纯红；
宽度：100px；
高度：100px；
显示：内联块；
}

---

您只需添加

空白：nowrap

.container{
宽度：100%；
溢出-x：滚动；
}
.内容{
空白：nowrap；
}
.盒子{
边框：1px纯红；
宽度：100px；
高度：100px；
显示：内联块；
}

谢谢好心的先生，这正是我想要的！谢谢你，好心的先生，这正是我想要的！

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

.container{
    height: 100px;
    width: 100%;
    overflow-x:scroll; 
}
.content{
    height: 100px;
}
.box{
    border: 1px solid red;
    width: 100px;
    height: 100px;
    display: inline-block;
}