CSS Layout - Overflow

In CSS, the overflow property is used to control how content that is larger than its container should be handled. It is commonly used to handle scenarios where the content of an element overflows its allocated space

Example

#overflow {
  background: green;
  color: white;
  padding: 15px;
  width: 100%;
  height: 100px;
  overflow: scroll;
  border: 1px solid #ccc;
}

You can click on above box to edit the code and run again.

Output

The overflow property controls what happens to content that is too big to fit into an area.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis pariatur labore ratione, fugiat eius quam soluta necessitatibus nesciunt maxime, commodi aut accusantium aliquam saepe, iure nihil excepturi dolores doloremque cumque! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis pariatur labore ratione, fugiat eius quam soluta necessitatibus nesciunt maxime, commodi aut accusantium aliquam saepe, iure nihil excepturi dolores doloremque cumque! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis pariatur labore ratione, fugiat eius quam soluta necessitatibus nesciunt maxime, commodi aut accusantium aliquam saepe, iure nihil excepturi dolores doloremque cumque! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis pariatur labore ratione, fugiat eius quam soluta necessitatibus nesciunt maxime, commodi aut accusantium aliquam saepe, iure nihil excepturi dolores doloremque cumque! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis pariatur labore ratione, fugiat eius quam soluta necessitatibus nesciunt maxime, commodi aut accusantium aliquam saepe, iure nihil excepturi dolores doloremque cumque!

Overflow Hidden

It hides the content which doesn’t fit the box.

Example

div {
      background-color:  green;
      width:  100%;
      height:  130px;
      border:  2px solid black;
      overflow:  hidden;
      color:  white;
    }

You can click on above box to edit the code and run again.

Output

Content will overflow the container without any clipping. This means that the overflow will be visible outside the container.

Example

div {
   width:  100%;
   height:  50px;
   background-color:  green;
   overflow:  visible;
    }

You can click on above box to edit the code and run again.