为什么这些内联块 div 会换行，尽管它们的父级有 overflow-x:scroll？

Question

在这个 SSCCE 中，.wrapper 是父级，被赋予 overflow-x:scroll。所有的子 dvivs 都被赋予 display:inline-block。我期待子 div 出现在一行中，第五和第六个 .item 在我向右滚动之前不可见。

但是，第五个和第六个 .item 换行到下一行。 问题是为什么，我应该怎么做？

* {
  margin: 0px;
  padding: 0px;
  border: 0px none;
  background: transparent none repeat scroll 0% 0%;
  font-size: 100%;
  vertical-align: baseline;
}
.wrapper {
  overflow-x: scroll;
  position: relative;
}
div.item {
  /*position:absolute;*/
  display: inline-block;
  width: 25%;
  height: 25vw;
}
.wheat {
  background-color: wheat;
}
.pink {
  background-color: pink;
}
.beige {
  background-color: beige;
}
.gainsboro {
  background-color: gainsboro;
}
.coral {
  background-color: coral;
}
.crimson {
  background-color: crimson;
}
.item1 {
  left: 0%;
}
.item2 {
  left: 25%;
}
.item3 {
  left: 50%;
}
.item4 {
  left: 75%;
}
.item5 {
  left: 100%;
}
.item6 {
  left: 125%;
}
.previous-arrow,
.next-arrow {
  width: 30px;
  height: 50%;
  top: 50%;
  position: absolute;
  display: block;
  opacity: 0.7
}
.previous-arrow {
  text-align: right;
  background-image: url(a2.png);
  background-repeat: none;
}
.previous-arrow,
.next-arrow {
  opacity: 1;
}

<div class="wrapper">
  <!--<a class="previous-arrow" href="">&lt;</a>--><!--
  --><div class="item item1 wheat">a.</div><!--
  --><div class="item item2 pink">a.</div><!--
  --><div class="item item3 beige">a.</div><!--
  --><div class="item item4 gainsboro">a.</div><!--
  --><div class="item item5 coral">a.</div><!--
  --><div class="item item6 crimson">a.</div><!--
  -->
  <!--<a class="next-arrow" href="">&lt;</a>-->
</div>

Answer 1

一般来说，行内级盒子会尽可能地避免溢出它们的容器。您在 .wrapper 元素中有一系列内联块 .item。一旦下一个内联块的 .wrapper 内的当前行不再有任何 space ，就会发生换行，下一个内联块换行到下一行，其余项目效仿。请注意，即使没有元素间 whitespace（您已使用 HTML 注释确保），也会发生这种情况。

容器上overflow的值不影响是否或当其内容溢出时；它只会在发生溢出时更改它及其内容的呈现方式。

因此您必须强制行内块实际溢出容器。执行此操作的最简单方法是在 .wrapper 上指定 white-space: nowrap，因为您正在处理一系列内联块，这会抑制所有换行机会，即使在内联块之间也是如此：

.wrapper {
  overflow-x: scroll;
  position: relative;
  white-space: nowrap;
}

* {
  margin: 0px;
  padding: 0px;
  border: 0px none;
  background: transparent none repeat scroll 0% 0%;
  font-size: 100%;
  vertical-align: baseline;
}
.wrapper {
  overflow-x: scroll;
  position: relative;
  white-space: nowrap;
}
div.item {
  display: inline-block;
  width: 25%;
  height: 25vw;
}
.wheat {
  background-color: wheat;
}
.pink {
  background-color: pink;
}
.beige {
  background-color: beige;
}
.gainsboro {
  background-color: gainsboro;
}
.coral {
  background-color: coral;
}
.crimson {
  background-color: crimson;
}
.item1 {
  left: 0%;
}
.item2 {
  left: 25%;
}
.item3 {
  left: 50%;
}
.item4 {
  left: 75%;
}
.item5 {
  left: 100%;
}
.item6 {
  left: 125%;
}
.previous-arrow,
.next-arrow {
  width: 30px;
  height: 50%;
  top: 50%;
  position: absolute;
  display: block;
  opacity: 0.7
}
.previous-arrow {
  text-align: right;
  background-image: url(a2.png);
  background-repeat: none;
}
.previous-arrow,
.next-arrow {
  opacity: 1;
}

<div class="wrapper">
  <!--<a class="previous-arrow" href="">&lt;</a>--><!--
  --><div class="item item1 wheat">a.</div><!--
  --><div class="item item2 pink">a.</div><!--
  --><div class="item item3 beige">a.</div><!--
  --><div class="item item4 gainsboro">a.</div><!--
  --><div class="item item5 coral">a.</div><!--
  --><div class="item item6 crimson">a.</div><!--
  -->
  <!--<a class="next-arrow" href="">&lt;</a>-->
</div>

为什么这些内联块 div 会换行，尽管它们的父级有 overflow-x:scroll？

Why are these inline-block divs wrapping in spite of their parent having overflow-x:scroll?

html

css

css-position

overflow