Make a div horizontally scrollable using CSS

In this article, we will know to design the horizontally scrollable div using CSS, & will see its implementation through the example. We can make a div horizontally scrollable by using the CSS overflow property. There are different values in the overflow property. For eg, the overflow: auto; is used for adding a scrollbar automatically whenever it is required and the axis hiding procedure like overflow-x: auto; is used to make only a horizontal scrollable bar.
For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.

Example 1: In this example, we have used the overflow-y: hidden; and overflow-x: auto; to make div horizontally scrollable.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Making a div horizontally
        scrollable using CSS
    </title>
    <style>
    h1 {
        color: Green;
    }
     
    div.scroll {
        margin: 4px, 4px;
        padding: 4px;
        background-color: #08c708;
        width: 300px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>
        Making a div horizontally
        scrollable using CSS
      </h2>
        <div class="scroll">
             It is a good platform to learn programming.
             It is an educational website. Prepare for the
             Recruitment drive of product based companies
             like Microsoft, Amazon, Adobe etc with a free
             online placement preparation course. The course
             focuses on various MCQ's & Coding question likely
             to be asked in the interviews & make your upcoming
             placement season efficient and successful. Also,
             any geeks can help other geeks by writing articles
             on the GeeksforGeeks, publishing articles follow few
             steps that are Articles that need little modification
             or improvement from reviewers are published first.
             To quickly get your articles reviewed, please refer
             existing articles, their formatting style, coding style,
             and try to make you are close to them. In case you are a
             beginner, you may refer Guidelines to write an Article
        </div>
    </center>
</body>
 
</html>

Output:

Using overflow-y: hidden; & overflow-x: auto;

Example 2: In this example, we have used the auto in place of overflow-y: hidden; and overflow-x: auto; to make div horizontally scrollable.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
         Making a div horizontally
         scrollable using CSS 
    </title>
    <style>
    h1 {
        color: Green;
    }
     
    div.scroll {
        margin: 4px, 4px;
        padding: 4px;
        background-color: #08c708;
        width: 300px;
        overflow: auto;
        white-space: nowrap;
    }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>
        Making a div horizontally
        scrollable using CSS
      </h2>
        <div class="scroll">
          It is a good platform to learn programming.
          It is an educational website. Prepare for
          the Recruitment drive of product based companies
          like Microsoft, Amazon, Adobe etc with a free
          online placement preparation course. The
          course focuses on various MCQ's & Coding question
          likely to be asked in the interviews & make your
          upcoming placement season efficient and successful.
          Also, any geeks can help other geeks by writing
          articles on the GeeksforGeeks, publishing articles
          follow few steps that are Articles that need little
          modification or improvement from reviewers are
          published first.
          To quickly get your articles reviewed, please refer
          existing articles, their
          formatting style, coding style, and try to make you
          are close to them. In case you are a beginner, you
          may refer Guidelines to write an Article
        </div>
    </center>
</body>
 
</html>

Output:

Using overflow: auto;

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

Last Updated : 10 May, 2022