How Do I Make a Div Vertically Scrollable with CSS Only?

Making a Div Vertically Scrollable Using CSS

When attempting to create a vertically scrollable div, setting the CSS property overflow: scroll; may inadvertently allow both horizontal and vertical scrolling. To restrict scrolling to the vertical axis only, it is necessary to adjust the CSS property.

Correcting the CSS Property

The property overflow-x controls horizontal scrolling, while overflow-y controls vertical scrolling. To ensure vertical-only scrolling, you can use either of the following approaches:

Forcing a Vertical Scrollbar

If you want a vertical scrollbar to always appear, regardless of the content's height, use:

overflow-y: scroll;

This forces a vertical scrollbar, even if the content doesn't exceed the height of the div.

Conditional Vertical Scrollbar

If you only want a vertical scrollbar to appear when the content exceeds the height of the div, use:

overflow: auto;

This will automatically add a vertical scrollbar only if the content is too tall to fit within the div's height.

The above is the detailed content of How Do I Make a Div Vertically Scrollable with CSS Only?. For more information, please follow other related articles on the PHP Chinese website!