CSS Overflow Problems

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