html - 如何让 `overflow-x` 代替 `overflow-y` 工作？

Question

我有一个父级，它有多个子级，当父级宽度溢出时，我喜欢显示水平滚动条。

我不想使用“display:inline-block”属性，因为它们之间会产生空白。

这是我的尝试:

.parent{
  width:250px;
  overflow-x:auto;
  height:100px;
  white-space: nowrap; 
}

.children{
  width:250px;
  height:100px;
  float:left;
  border:1px solid red;
  box-sizing:border-box;
}

<div class="parent">
  <div class="children">children 1</div>
  <div class="children">children 2</div>
  <div class="children">children 3</div>
  <div class="children">children 4</div>
</div>

Answer 1

使用 flexbox

.parent {
  margin: 1em auto;
  overflow-x: auto;
  width: 250px;
  white-space: nowrap;
  display: flex;
  border: 1px solid blue;
}
.children {
  flex: 0 0 250px;
  height: 100px;
  border: 1px solid red;
  box-sizing: border-box;
}

<div class="parent">
  <div class="children">children 1</div>
  <div class="children">children 2</div>
  <div class="children">children 3</div>
  <div class="children">children 4</div>
</div>