Overflow properties

Overflow is a css property which will come into picture only when the contents of an html element (for eg, h1) exceeds the size i.e, width and height of it parents.

By default, an html element is flexible meaning, you can put as much content in it as you want and it will happily accept, accomodate and grow in size and will not let any content overflow.

overflow property is made of overflow-x and overflow-y meaning in horizontal direction and vertical direction.

This value of overflow, overflow: auto , meaning both overflow-x and overflow-y is auto. So either use overflow-x or overflow-y separately depending on need or use directly overflow property to set the value of both overflow-x and overflow-y.

Now we will study examples of horizontal overflow and vertical overflow and then the way to fix it too.
Horizontal overflow scenario :

Now lets study a scenario when text overflows horizontally. Just 2 properties can let this happen. width: 200px on a parent container and white-space: nowrap on a child/content wrapper is sufficient to make a text flow beyond the containers set width (of 200px here). Here is the html/css code snippet for this scenario; 

// HTML
<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Curabitur non purus ac justo dapibus euismod. 
    Phasellus tempor vehicula magna, ac ultrices risus congue vitae.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Curabitur non purus ac justo dapibus euismod. 
    Phasellus tempor vehicula magna, ac ultrices risus congue vitae.
  </div>
</div>

//css
.container{
  width: 200px; /* Fixed width container */
}

.content {
   white-space: nowrap; /* Prevent line breaks */  
}


Solution:
The way to fix it is simply by putting this line of css in the parent container
i.e overflow-x: auto.

Vertical overflow scenario :

Texts will overflow vertically only when we put a fixed height on parent. Lets see the html/css code snippet to study that: 

// HTML
<div class="container">
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Curabitur non purus ac justo dapibus euismod. 
  Phasellus tempor vehicula magna, ac ultrices risus congue vitae.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Curabitur non purus ac justo dapibus euismod. 
  Phasellus tempor vehicula magna, ac ultrices risus congue vitae.
  
   Curabitur non purus ac justo dapibus euismod. 
  Phasellus tempor vehicula magna, ac ultrices risus congue vitae.
  </div>
</div>

//css
.container{
  height: 30px; /* Fixed height container */
}


Solution:
The way to fix it is simply by putting this line of css in the parent container
i.e overflow-y: auto.

Possible values of overflow property :

Possible values for the overflow property:

  1. visible : This is default value. Contents overflowed outside parent containers dimension is visible.
  2. hidden : Contents overflowed outside parent containers dimension is hidden.
  3. scroll : Contents overflowed outside parent containers dimension is forced inside a parent containers dimension itself by enabling a scrollbar to accomodate the extra content.
  4. auto : same as scroll. Only difference is that if content fits with the container no scrollbar is added unlike scroll.
  5. overlay : same as scroll. Only difference is that scrollbar is added only when user interacts with the parent container.

PrevNext