CODEWITHSUNDEEP
htmlcss
r3plica
r3plica

Reputation: 13367

CSS only stretch container more than the width of the page with scrollbar

I have an application that scrolls horizontally. Current I set the width of the container to 10000px and resize it based on the children using javascript. The html looks something like this:

<div class=container>
  <div class="stretching-div">
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
  </div>
</div>

This is causing me issues at the moment, because of hidden elements, etc. So I have created a code pen to try to explain my issues in a better way:

https://codepen.io/r3plica/pen/vWrQOm

Does anyone know how I can achieve my goal without using JavaScript. Just by using CSS?

Upvotes: 1

Views: 125

Answers (2)

ecastellano
ecastellano

Reputation: 40

I made some changes on your codepen and I found a solution: https://codepen.io/ecastellano/pen/qVKQKm

The container div isn't necessary (remove it), the key here is to add these properties to the .stretching-div:

overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;

Finally you'll have to remove width property to .fixed-with div and thats all :)

Hope this works for you!

Upvotes: 0

Jordi Nebot
Jordi Nebot

Reputation: 3401

Try white-space: nowrap; on your .stretching-div. Then you'll have an issue with your orange background.

The white-space CSS property determines how whitespace inside an element is handled.

nowrap Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within the source.

.container {
  background-color: red;
  padding: 20px;
  overflow-y: hidden;
}

.stretching-div {
  background-color: orange;
  padding: 20px;
  white-space: nowrap;
}

.child {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: yellow;
  margin-right: 50px;
}
<div class="container">
  <div class="stretching-div">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

But this can also be solved...

.container {
  background-color: orange;
  border: 20px solid red;
  overflow-y: hidden;
}

.stretching-div {
  padding: 20px;
  white-space: nowrap;
}

.child {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: yellow;
  margin-right: 50px;
}
<div class="container">
  <div class="stretching-div">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Upvotes: 3

Related Questions