CODEWITHSUNDEEP
cssscroll
rota90
rota90

Reputation: 259

Diffrence between overflow-x and overflow

What is the diffrence between overflow-x: hidden and overflow:hidden;?

What I know is that overflow-x: hidden; disable horizantal scroll but when I use it, it does not work only with firefox so I change it with overflow and it works perfectly.

Upvotes: 2

Views: 6057

Answers (3)

Oriol
Oriol

Reputation: 288620

In CSS 2.1 there was only overflow:

This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

However, the CSS basic box model introduced overflow-x and overflow-y, and redefined overflow to be a shorthand of them:

These properties specify whether content is clipped when it overflows the element's content area. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element. ‘Overflow-x’ determines clipping at the left and right edges, ‘overflow-y’ at the top and bottom edges.

‘Overflow’ is a shorthand. If it has one keyword, it sets both ‘overflow-x’ and ‘overflow-y’ to that keyword; if it has two, it sets ‘overflow-x’ to the first and ‘overflow-y’ to the second.

Upvotes: 2

BloodyMery
BloodyMery

Reputation: 31

overflow-x and overflow-y are the same (horizontal and vertical) BUT: The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’

Checkout this web: http://www.w3.org/TR/css3-box/#overflow-x

Upvotes: 3

arnolds
arnolds

Reputation: 788

  • overflow: hidden; hides both horizontal and vertical scrollbars.
  • overflow-x: hidden; hides horizontal scrollbars.
  • overflow-y: hidden; hides vertical scrollbars.

Make sure you are setting the property to hide horizontal scrollbars like so:

body {
   overflow-x: hidden;
}

Upvotes: 0

Related Questions