CSS Overflow Problems
You may have faced horizontal scrollbar problems as a front-end developer, especially on mobile devices. Scrollbar problems have many causes, some of which can be resolved quickly, while others may require some debugging expertise.
What is Overflow?
An overflow issue occurs when the user unintentionally scrolls horizontally on a web page due to an unintentional horizontal scrollbar. Different factors can cause overflows to occur.
“When there is too much content for a box to contain, overflow occurs.”
Keywords You Can Use To Overflow
The overflow property can accept the following possible values:
div { overflow: visible | hidden | scroll | auto | inherit }
Visible CSS Overflow:
When the content leaves the boundary of its box, it is not clipped. This is the default setting of this property.
CSS:
.element { height: 100px; overflow: visible; }
Hidden Overflow CSS:
Content that is overflowing will be hidden.
CSS:
.element { height: 100px; overflow: hidden; }
Scroll:
Hidden with the exception that users can move through the hidden content as they scroll.
Whether the content is long or short, the scrollbar is always visible.
CSS code:
.element { height: 100px; overflow: scroll; }
Auto:
Content is long
A scrollbar is visible
Content is short
A scrollbar is not visible
CSS code:
.element { height: 100px; overflow: auto; }
Initial: Displays the default value when visible.
Inherit: A value of the parent element is set as the overflow.
Reference to this for more https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Leave a Reply
Want to join the discussion?Feel free to contribute!