Make Content Horizontally Scroll Inside a Div

Make content horizontally scroll inside a div

It may be something like this in HTML:

<div class="container-outer">
<div class="container-inner">
<!-- Your images over here -->

With this stylesheet:

.container-outer { overflow: scroll; width: 500px; height: 210px; }
.container-inner { width: 10000px; }

You can even create an intelligent script to calculate the inner container width, like this one:

$(document).ready(function() {
var container_width = SINGLE_IMAGE_WIDTH * $(".container-inner a").length;
$(".container-inner").css("width", container_width);

How can I make a horizontally scrollable div with divs in it?

Try this:

width: max-content !important;

or this:

width: 100%;
display: flex;
flex-flow: row;
flex-wrap: nowrap;
overflow: scroll;

Horizontally scrollable div inside full width div

You can do it with Flexbox:

.outer {
display: flex; /* displays flex-items (children) inline */
overflow-x: auto;

.inner {
flex: 0 0 25%; /* doesn't grow nor shrink, initial width set to 25% of the parent's */
height: 1em; /* just for demo */
<div class="outer">
<div class="inner" style="background: red"></div>
<div class="inner" style="background: green"></div>
<div class="inner" style="background: blue"></div>
<div class="inner" style="background: yellow"></div>
<div class="inner" style="background: orange"></div>

How can I make a div scroll horizontally

Is this what you're looking for?

.outer {    width: 500px;    height: 100px;    white-space: nowrap;    position: relative;    overflow-x: scroll;    overflow-y: hidden;    -webkit-overflow-scrolling: touch;}
.outer div { width: 24.5%; background-color: #eee; float: none; height: 90%; margin: 0 0.25%; display: inline-block; zoom: 1;}
<div class="outer">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></div>

Horizontal scrolling within a div

Set white-space:nowrap and overflow:auto on outer div.

Set display:inline-block on inner div, and remove float.

#outer {  border: 13px solid #bed5cd;  overflow-x: auto;  overflow-y: hidden;  white-space: nowrap;}#inner {  display: inline-block;  white-space: normal;  width: 20em;  padding: 10px;  margin: 20px;}
<div id="outer">  <div id="inner">    data  </div>  <div id="inner">    data  </div>  <div id="inner">    data  </div></div>

How to make independent horizontal scrolling on a div container?

What you're looking for is the CSS property overflow-x which will allow you to specify the overflow behavior with CSS.

Here is MDN's documentation on this property.

The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.


Here is a working example of what you are asking for. If I'm not understanding your question, please let me know.

.padding {

.container {

.child-container {

.child-item {
min-width: 500px;
<div class="container padding" style="background:#ededed;">
<div class="padding">
<div class="child-container padding">
<div class="child-item">
<h1>Hello world</h1>

make a button to scroll horizontally in div

You can scroll using Element.scrollLeft property to which you can
provide the amount to scroll as an integer value.

Here is a basic example:
JavaScript + CSS + HTML

    const buttonRight = document.getElementById('slideRight');    const buttonLeft = document.getElementById('slideLeft');
buttonRight.onclick = function () { document.getElementById('container').scrollLeft += 20; }; buttonLeft.onclick = function () { document.getElementById('container').scrollLeft -= 20; };
    #container {      width: 145px;      height: 100px;      border: 1px solid #ccc;      overflow-x: scroll;    }
#content { width: 250px; background-color: #ccc; }
    <div id="container">      <div id="content">Click the buttons to slide horizontally!</div>    </div>    <button id="slideLeft" type="button">Slide left</button>    <button id="slideRight" type="button">Slide right</button>

Div with horizontal scrolling only

The solution is fairly straight forward. To ensure that we don't impact the width of the cells in the table, we'll turn off white-space. To ensure we get a horizontal scroll bar, we'll turn on overflow-x. And that's pretty much it:

.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;

You can see the end-result here, or in the animation below. If the table determines the height of your container, you should not need to explicitly set overflow-y to hidden. But understand that is also an option.

enter image description here

Make one very wide div horizontally scroll without affecting the rest of the page

Try this

<div style="width: 100vw; overflow-x: auto;">

Related Topics

Leave a reply