css:多个div防止换行，而不是滚动

Question

我有以下示例：在此处输入链接描述

我想归档具有类"following"的div将显示在一行中，并带有红色的"left"容器。在本例中，第三个蓝色容器后面有一个换行符。如果下面有两个蓝色项目，我希望有一个水平滚动条而不是换行符。本例中的第二行是可以的，因为它没有足够的蓝色容器。

.container {
width:600px;
height:200px;
border:1px solid;
}

.row {
clear: both;
}

.left {
width: 200px;
height:50px;
background:red;
float: left;
border: 1px solid black;
}

.following {
width: 100px;
height: 50px;
background: blue;
border: 1px solid black;
float: left;
}

<div class="container">
<div class="row">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
</div>

Answer 1

这就是您想要的吗？我已经更新了它，改为使用弹性布局。

.container {
width:600px;
height:auto;
border:1px solid;
display: flex;
overflow-y: hidden;
overflow-x: auto;
}
.left {
width: 200px;
height:50px;
background:red;
border: 1px solid black;
flex-shrink: 0;
}
.following {
width: 100px;
height: 50px;
background: blue;
border: 1px solid black;
flex-shrink: 0;
}

<div class="container">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
<div class="container">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>

Answer 2

这就是您问题的答案吗？

.container {
width:600px;
height:200px;
border:1px solid;
overflow: auto;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
align-items: center;
}
.left {
min-width: 200px;
height:50px;
background:red;
border: 1px solid black;
}
.following {
min-width: 100px;
height: 50px;
background: blue;
border: 1px solid black;
}

<div class="container">
<div class="row">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="following"></div>
<div class="following"></div>
<div class="following"></div>
</div>
</div>