Reputation: 18594
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:
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:
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>
Upvotes: 3
Views: 1420
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
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