CSS Overflow X and Y
overflow-x and overflow-y split overflow control into the horizontal and vertical directions so each axis can behave differently.
The shorthand overflow applies the same rule to both directions. When you want them to differ, for example scrolling sideways but never up and down, the axis-specific properties give you that control.
The two properties
Scroll one direction only
<!DOCTYPE html>
<html>
<head>
<style>
.row {
overflow-x: auto;
overflow-y: hidden;
}
</style>
</head>
<body>
<div class="row">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
</div>
</body>
</html>A horizontal card strip
A common pattern is a single row of cards that scrolls sideways on small screens while staying fixed in height. overflow-x: auto handles the scrolling and white-space keeps the cards on one line.
Swipeable cards
<!DOCTYPE html>
<html>
<head>
<style>
.carousel {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="carousel">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
</body>
</html>A vertically scrolling list
Scrollable list
<!DOCTYPE html>
<html>
<head>
<style>
.messages {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<div class="messages">
<p>Hey, are you free today?</p>
<p>Yes, at 3pm works.</p>
<p>Great, see you then.</p>
</div>
</body>
</html>Note: Combining a scrollable axis with a hidden one can clip content unexpectedly. Make sure the direction you hide truly has no important content spilling out.
Note: The base overflow property is a shorthand. overflow: hidden auto sets the horizontal axis first and the vertical axis second.
