CODEWITHSUNDEEP
htmlcss
Malte
Malte

Reputation: 484

Scrolling on x-axis in a div with overflow

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

Upvotes: 3

Views: 18016

Answers (3)

Anupam Khasia
Anupam Khasia

Reputation: 89

Try This :

    .parent {
        position: relative;
        /* width: 80%; */
        height: 300px;
        left: 20%;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 30px;
        /* overflow-x: scroll; */
        overflow: scroll;
        background: #f5f5f5;
        overflow-y: scroll;
        /* float: left; */
        overflow-x: scroll;
    }

    .child {
        width: 200px;
        height: 100%;
        margin-right: 30px;
        padding: 25px;
        box-sizing: border-box;
        background: #3b3b3b;
        /* float: none; */
        display: -webkit-inline-box;
        /* vertical-align: bottom; */
    }

Upvotes: 0

Balwant Singh
Balwant Singh

Reputation: 107

Try this 

.parent {
  position: absolute;
  width: 80%; height: 300px;
  left: 20%; top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  padding: 30px;
  white-space:nowrap;
  overflow-x: scroll;
  background: #f5f5f5;
}


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

Upvotes: 1

Kuja
Kuja

Reputation: 449

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>

Upvotes: 5

Related Questions