In CSS, how can you show only a vertical scrollbar for a page or container while hiding the horizontal scrollbar?

Introduction / Context:
Controlling scrollbars using CSS is a common layout task in front end development. Sometimes a designer wants content to scroll only vertically while preventing horizontal scrolling to avoid unwanted side movement or layout breaks. Interview questions often ask how to achieve a vertical scrollbar only, which tests knowledge of the overflow properties and how they behave along the x and y axes in CSS.

Given Data / Assumptions:

• We are working with standard CSS applied to an HTML element such as body, html, or a div container.
• The content might extend beyond the visible height or width of the element.
• The goal is to allow vertical scrolling but completely hide or prevent horizontal scrolling.
• The candidate is expected to know the overflow, overflow-x, and overflow-y properties.

Concept / Approach:
CSS provides the overflow property to control what happens when content overflows the box. For finer control, overflow-x and overflow-y manage horizontal and vertical overflow separately. To show only a vertical scrollbar, the element should allow vertical overflow with overflow-y set to scroll or auto, while horizontal overflowing content should be hidden by setting overflow-x to hidden. This combination ensures that users can scroll up and down but cannot scroll sideways, and no horizontal scrollbar will be drawn.

Step-by-Step Solution:
Step 1: Recall that overflow: scroll shows scrollbars for both directions whenever content overflows both width and height. Step 2: To treat axes independently, use overflow-x for the horizontal axis and overflow-y for the vertical axis. Step 3: For the vertical axis, we want a scrollbar, so set overflow-y: scroll or overflow-y: auto depending on whether the scrollbar should always show or only when needed. Step 4: For the horizontal axis, we want no scrolling and no visible scrollbar, so set overflow-x: hidden. Step 5: In CSS, this looks like: html, body { overflow-y: scroll; overflow-x: hidden; } or the same declarations for a specific container. Step 6: Therefore, the correct option is to set overflow-y to scroll and overflow-x to hidden so that only vertical scrolling is possible.

Verification / Alternative check:
You can verify this behaviour by creating a div with a fixed width and height in a test page, placing wide content inside it, and then applying overflow-y: scroll and overflow-x: hidden in the developer tools. You will see that you can scroll up and down, but no horizontal scrollbar is visible, and content that exceeds the width is clipped. Reversing the settings to overflow-x: scroll and overflow-y: hidden produces only a horizontal scrollbar, which confirms that the axis specific overflow properties control scrollbars independently.

Why Other Options Are Wrong:
Option b is wrong because overflow: visible does not show any scrollbars and simply lets content overflow out of the element, which does not constrain layout and can break the design. Option c describes the opposite configuration, producing only a horizontal scrollbar, which is not what the question asks. Option d is incorrect because disabling scrolling at the browser level is neither realistic nor specific to a single page; it also does not express the CSS knowledge being tested.

Common Pitfalls:
Developers sometimes apply overflow: hidden to the body to remove a horizontal scrollbar but forget about vertical scrolling, which can trap users if not handled carefully. Another pitfall is applying overflow properties to the wrong element, such as setting them only on body while the root html element still allows scrollbars. Cross browser differences in how scrollbars are rendered can also cause confusion. The best practice is to target the specific container where scroll behaviour is desired and explicitly control both overflow-x and overflow-y for predictable results.

Final Answer:
Set overflow-y to scroll and overflow-x to hidden for the page or container so that only vertical scrolling is possible.