In dieser SSCCE,.wrapper, das Elternteil ist, wird @ gegeboverflow-x:scroll. Alle Kinder-Dvivs erhaltendisplay:inline-block. Ich hatte erwartet, dass die untergeordneten Divs in einer einzigen Zeile mit dem fünften und sechsten @ erscheinen würde.item erst sichtbar, wenn ich nach rechts scrolle.

Aber stattdessen die fünfte und die sechste.item in die nächste Zeile umbrechen. Die Frage ist warum und was soll ich dagegen tun?

* {
  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>