Overflow

The overflow property comes in handy if the content for some reason is bigger than its container. This may happen if you don't know the exact size of the container or the exact size of the content. Some text, for example, may not fit the height of the container, some images — both height and width. If so, this overflow property allows us to set scrollbars to the container to make it possible to scroll the content along a certain axis. Just like the browser viewport, but in a single block.

Scrolling and cropping

There are three different properties defining the overflow behavior of the block: overflow-x, overflow-y, and overflow. It's easy to get that the first one stands for the horizontal overflow, the second one — for the vertical overflow, and the last one — for both at the same time. Let's take a closer look at each one:

overflow-x and overflow-y both have the same values, which are:

• visible, which is the default value. It makes all the extra content stay as is, despite the size of the container. This may cause adjacent elements to overlap:

  .block {
    border-right: 10px solid #068c3c;
    box-shadow: 11px 8px 32px -7px #000000;
    background: white;
    padding: .5em;
    max-width: 200px;
    height: 100px;
    text-align: left;
    margin: 2em 0 0 2em;
  
    overflow: visible;
  }
  

  

• hidden value crops the content no matter how important it is. The users won't be able to see the cropped content:

  .block {
    border-right: 10px solid #068c3c;
    box-shadow: 11px 8px 32px -7px #000000;
    background: white;
    padding: .5em;
    max-width: 200px;
    height: 100px;
    text-align: left;
    margin: 2em 0 0 2em;
  
    overflow: hidden;
  }
  

  

• scroll value crops the content just like hidden value, but this time adds scrollbars. Note, that those are added even if there is no extra content:

  .block {
    border-right: 10px solid #068c3c;
    box-shadow: 11px 8px 32px -7px #000000;
    background: white;
    padding: .5em;
    max-width: 200px;
    height: 100px;
    text-align: left;
    margin: 2em 0 0 2em;
  
    overflow: scroll;
  }
  

  

• auto value is the simplest one. If there is some overlapping content, it will be cropped and scrollbars will be added, if not — nevermind then.

While those two properties help you manipulate the content only in a certain direction (x or y), the overflow property defines the behavior of the content in both directions at the same time. This property has all the same values.

text-overflow

text-overflow allows us to crop the overlapping text or turn it into an ellipsis. This property is useful if it's possible to add the "read more" button which after being clicked expands the block to the size of the text or when the white-space: nowrap property, that prevents the text from wrapping, is used with the overflow: hidden property. Here is how it looks if we don't let the text wrap and let it overlap:

.block {
  border-right: 10px solid #068c3c;
  box-shadow: 11px 8px 32px -7px #000000;
  background: white;
  padding: .5em;
  max-width: 200px;
  height: 100px;
  text-align: left;
  margin: 2em 0 0 2em;

  overflow: visible;
  white-space: nowrap;
}

Now let's see what happens if we apply the text-overflow property to the block:

• text-overflow: clip will make the text cropped to fit the container (exactly like the overflow: hidden). In this case, even a single letter might be cropped:

  .block {
    border-right: 10px solid #068c3c;
    box-shadow: 11px 8px 32px -7px #000000;
    background: white;
    padding: .5em;
    max-width: 200px;
    height: 100px;
    text-align: left;
    margin: 2em 0 0 2em;
  
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }
  

  

• text-overflow: ellipsis will turn the overlapping text into an ellipsis:

  .block {
    border-right: 10px solid #068c3c;
    box-shadow: 11px 8px 32px -7px #000000;
    background: white;
    padding: .5em;
    max-width: 200px;
    height: 100px;
    text-align: left;
    margin: 2em 0 0 2em;
  
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  

  

The problem

Everything seems cool, but nothing in this world, especially in CSS, is perfect. The thing is that shadow of the block is also considered to be the content. So, if the parent block has overflow: hidden and its child (which is stuck to one of the sides of the parent block) has a shadow, the shadow will be cropped. This case is demonstrated below:

.block {
    border-right: 10px solid #068c3c;
    background: white;
    padding: 0.5em;
    max-width: 200px;
    height: 100px;
    text-align: left;
    margin: 2em 0 0 2em;
    overflow: hidden;
}

.child {
    box-shadow: 11px 8px 32px -7px #000000;
}

As you can see, the shadow of the child element from the bottom part is also hidden because of the fact that the parent container has the CSS property overflow: hidden. Now, if the overflow: hidden is removed from the parent block, the output would look like below:

As you can see in the above output, deleting the overflow: hidden CSS property from the parent container, the shadow of the child element in the bottom is visible again. There is no common solution for this problem, and we are left staring at the screen trying to come up with the best possible crutch. One possible solution in certain cases might be setting some paddings to the child block to make the shadow fit the parent block. But the easiest solution for this issue is to never use overflow: hidden. Why does this value even exist?

Summary

All in all, everything leads to using overflow: auto anywhere you have to control overflow. Overlapping content coming from overflow: visible or not-on-purpose-hidden content coming from overflow: hidden in real projects are usually considered a layout mistake, so are the unnecessary scrollbars coming from overflow: scroll. The easiest way to control this is simply to use overflow: auto.