Evgenij Reznik
Evgenij Reznik

Reputation: 18594

Forcing the scroll bar to appear, without line break

I have 3 divs in 1 row displayed as inline-block. When the container div, which contains those 3 divs, is minimized, I want a scroll bar to appear.
Unfortunately, in my case the 3 divs will be put into the next line, instead of displaying the scroll bar:

enter image description here

Only after all 3 divs were put to another line and there is no other possibility to minimize the container div, the scroll bar finally appears:

enter image description here

How can I always keep the 3 divs into 1 line and force the scroll bar to appear as soon as possible (when needed), without putting the divs into other lines?

#container {
  overflow-x: auto;
}

.myclass {
  border: 1px solid;
  display: inline-block;
  width: 300px;
}
<div id="container">
  <div id="div1" class="myclass">
    abc
  </div>
  <div id="div2" class="myclass">
    def
  </div>
  <div id="div3" class="myclass">
    ghi
  </div>
</div>

Here is a fiddle.

Upvotes: 3

Views: 1420

Answers (2)

amflare
amflare

Reputation: 4113

Put a width on your container.

#container {
  overflow-x: auto;
  width: 300px;
}

All together now:

#container {
  overflow-x: auto;
  width: 300px;
}

.myclass {
  border: 1px solid;
  display: inline-block;
  width: 300px;
}
<div id="container">
  <div id="div1" class="myclass">
    abc
  </div>
  <div id="div2" class="myclass">
    def
  </div>
  <div id="div3" class="myclass">
    ghi
  </div>
</div>

Upvotes: 0

Tom Michew
Tom Michew

Reputation: 788

Add this to the container so that the divs don't wrap.

#container {
   overflow-x: auto;
   white-space: nowrap;
}

Updated fiddle: https://jsfiddle.net/wea599a1/2/

Upvotes: 6

Related Questions