Loading lesson path
The overflow-x and overflow-y properties allow you to control overflow behavior independently for horizontal and vertical directions.
The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):
Formula
overflow - x specifies what to do with the left/right edges of the content.
overflow - y specifies what to do with the top/bottom edges of the content.You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
Hide horizontal scrollbar and add vertical scrollbar:
div {
overflow-x: hidden; /* Hide horizontal scrollbar*/
overflow-y: scroll; /* Add vertical scrollbar */
}These properties are useful when you need different scroll behavior for horizontal and vertical content:
Formula
- Use overflow - x: auto for wide tablesFormula
- Use overflow - y: scroll for vertical message scrollingFormula
- Use overflow - x: auto to handle long linesdiv {
overflow-x: scroll;
overflow-y: hidden;
}