CSS - 如何使浮动子元素保持超过其父宽度

Question

使用子元素的CSS方法是什么：.sub（绿色div）始终向左浮动而不会突破到第二行，无论视口

换句话说，我想将N个子元素放在左边，当它到达其父容器的宽度时，保持浮动在一行隐藏溢出。

我认为通过在父容器上设置overflow: hidden会这样做，但是我必须在这里缺少其他CSS属性来完成所需的行为。

<div class="container">
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  ...... more .sub divs below
</div>


body {
    background-color: blue;

}

.container{
  background-color: red;
  width: 100%;
  height: 300px;
  display: block;
  overflow: hidden;
}

.sub {
  float: left;
  background-color: green;
  width: 120px;
  height: 50px;
  margin: 3px;
}

Answer 1

您可以使用flex（ flex-wrap的初始值为nowrap ）

body {
    background-color: blue;
}

.container{
  background-color: red;
  width: 100%;
  height: 300px;
  display: flex;
  overflow: hidden;
}

.sub {
  background-color: green;
  height: 50px;
  margin: 3px;
  flex:0 0 120px;
}

<div class="container">
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

您可以在display:inline-box元素上使用.sub并使其容器white-space:nowrap（需要删除节点之间的空格，或使用类似font-size:0的技巧在容器等。）

body {
    background-color: blue;
}

.container{
  background-color: red;
  width: 100%;
  height: 300px;
  overflow: hidden;
  white-space:nowrap;
}

.sub {
  background-color: green;
  height: 50px;
  margin: 3px;
  width:120px;
  display:inline-block;
  white-space:normal;
}

<div class="container"><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div><div>