Scrolling on x-axis in a div with overflow

Issue

I want to put many children-divs in a parent-div. The parent has a fix width. The children are floating left and would be in the overflow.

It should be possible to scroll on the x-axis.

But in attempting to do that, the childrens get to the next line and don't overflow in x-direction.

I wrote a small example-pen, maybe I'm blind..

Scrolling on x-axis in a div with overflow

Solution

This can be achieved by adding white-space:nowrap on the parent div and then removing the float:left and adding display:inline-block to the child.

http://codepen.io/anon/pen/ggpKGO

html, body {
  width: 100%; height: 100%;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  text-transform: uppercase;
}
.parent {
  position: absolute;
  width: 80%; height: 300px;
  left: 20%; top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  padding: 30px;
  overflow-x: scroll;
  background: #f5f5f5;
  white-space: nowrap;
}

.child {
  width: 200px; height: 100%;
  margin-right: 30px;
  padding: 25px;
  box-sizing: border-box;
  background: #3b3b3b;
  display:inline-block;
}

<div class="parent">
  <div class="child">Child #1</div>
  <div class="child">Child #2</div>
  <div class="child">Child #3</div>
  <div class="child">Child #4</div>
  <div class="child">Child #5</div>
  <div class="child">Child #6</div>
  <div class="child">Child #7</div>
</div>

Answered By - Kuja