Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS - Only Horizontal Overflow?

Is it possible to achieve only horizontal overflow in CSS 2.1?

overflow: auto; 

Will cause a block element to have both horizontal and vertical scrollbars. I want a block element (let's say <div>) which will display only horizontal scrollbars. How do I do that?

like image 966
Richard Knop Avatar asked Aug 26 '09 18:08

Richard Knop


People also ask

How do you handle horizontal overflow in CSS?

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.

How do I fix the overflow in CSS?

To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.

How do I enable horizontal scrolling in CSS?

To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.

How do I make my div overflow vertical?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.


2 Answers

Try overflow-x: auto;

It even works in IE6!

like image 168
Cᴏʀʏ Avatar answered Sep 23 '22 22:09

Cᴏʀʏ


I tried overflow-x: hidden; and that worked for me.

like image 33
Bikram Shrestha Avatar answered Sep 21 '22 22:09

Bikram Shrestha