CssHow-ToBeginner · 3 min read

How to Create Horizontal Scroll in CSS: Simple Guide

To create horizontal scroll in CSS, set overflow-x: auto; on a container with content wider than its width. Use white-space: nowrap; or display: flex; on the inner content to keep items in a row that can scroll horizontally.

📐

Syntax

Use overflow-x to control horizontal scrolling on a container. Setting it to auto shows a scrollbar only when needed. The inner content should be wider than the container to enable scrolling.

overflow-x: auto; — enables horizontal scroll if content overflows
white-space: nowrap; — keeps inline content in one line
display: flex; — arranges child elements in a row

css

/* Container with horizontal scroll */
.container {
  width: 300px;
  overflow-x: auto;
  border: 1px solid #ccc;
}

/* Inner content wider than container */
.content {
  white-space: nowrap; /* keeps text/items in one line */
  /* or use display: flex; for block items */
}

💻

Example

This example shows a container with a fixed width and horizontal scroll enabled. The inner content is wider, so you can scroll sideways to see all items.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Horizontal Scroll Example</title>
<style>
  .container {
    width: 300px;
    overflow-x: auto;
    border: 2px solid #007acc;
    padding: 10px;
    white-space: nowrap;
  }
  .item {
    display: inline-block;
    background-color: #007acc;
    color: white;
    padding: 20px;
    margin-right: 10px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
  }
</style>
</head>
<body>
  <div class="container" aria-label="Scrollable list of colored boxes">
    <div class="item">Box 1</div>
    <div class="item">Box 2</div>
    <div class="item">Box 3</div>
    <div class="item">Box 4</div>
    <div class="item">Box 5</div>
    <div class="item">Box 6</div>
  </div>
</body>
</html>

Output

A horizontal scroll bar appears below a row of blue boxes labeled Box 1 to Box 6 inside a 300px wide container. You can scroll sideways to see all boxes.

⚠️

Common Pitfalls

Common mistakes when creating horizontal scroll include:

Not setting a fixed width on the container, so content never overflows and no scroll appears.
Forgetting white-space: nowrap; or display: flex; on inner content, causing items to wrap to next line instead of scrolling.
Using overflow: scroll; which always shows scrollbars, which can look cluttered.
Not considering accessibility, like missing aria-label on scroll containers.

css

/* Wrong: No fixed width, no scroll */
.container {
  overflow-x: auto;
}

/* Right: Fixed width and nowrap */
.container {
  width: 300px;
  overflow-x: auto;
  white-space: nowrap;
}

📊

Quick Reference

Summary tips for horizontal scroll in CSS:

Set overflow-x: auto; on the container.
Fix container width smaller than content width.
Use white-space: nowrap; for inline content or display: flex; for block items.
Add padding and border for better visuals.
Use semantic HTML and ARIA labels for accessibility.

✅

Key Takeaways

Use overflow-x: auto; on a fixed-width container to enable horizontal scrolling.

Keep inner content in a single row with white-space: nowrap; or display: flex;.

Ensure the container width is smaller than the content width to trigger scrolling.

Avoid always visible scrollbars by using auto instead of scroll.

Add ARIA labels to scroll containers for better accessibility.