Why Are These Inline-block Divs Wrapping In Spite Of Their Parent Having Overflow-x:scroll?

In this SSCCE, .wrapper, which is parent, is given overflow-x:scroll. All the child dvivs are given display:inline-block. I was expecting the child divs to appear in a single row,

Solution 1:

Generally, inline-level boxes do their best to avoid overflowing their containers as much as possible. You have a series of inline-block .items in a .wrapper element. Once there is no longer any space on the current line within .wrapper for the next inline-block, a line break occurs and the next inline-block wraps to the next line, and the rest of the items follow suit. Notice that this happens even when there is no inter-element whitespace (which you have ensured using HTML comments).

The value of overflow on a container doesn't influence whether or when its contents overflow; it only changes how it and its contents are rendered, when overflow does occur.

So you have to force the inline-blocks to actually overflow the container. The simplest way to do this, since you're dealing with a series of inline-blocks, is to specify white-space: nowrap on .wrapper, which suppresses all line break opportunities, even between inline-blocks:

.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;
}

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