CSS Overflow


Go to main Page

Overflow property in CSS

Overflow in CSS is used to bound the text into a container.

The text does not go outside of the container.

If the content is more and there is less space in the container then it creates a scroll bar.

Scroll bar is very helpful in some cases.

Overflow Properties in CSS

  1. visible
  2. hidden
  3. scroll
  4. auto
1)Visible

Visible means that the content can flow out of the container there is no restriction for it.

Example


      .container {
  width: 300px;
  height: 150px;
  background-color: orangered;
  overflow: visible;
}


1)Hidden

Hidden means that the content that is flowing outside is hidden now.

Example


      .container {
  width: 300px;
  height: 150px;
  background-color: orangered;
  overflow: hidden;
}


1)Scroll

Scroll property adds a scroll bar to a container.

Example


      .container {
  width: 300px;
  height: 150px;
  background-color: orangered;
  overflow: hidden;
}


1)Auto

Auto property adds a scroll bar to a container.It is same as scroll property.

Example


      .container {
  width: 300px;
  height: 150px;
  background-color: orangered;
  overflow: hidden;
}