Written by Andrei MoraruMay 07, 2020

Giving voice to our developers is one of our favorite things to do when it comes to our community. This type of collaboration gives us a strong bridge of communication somewhere between technical and non-technical - which is great. 

For this reason, the series of Learning CSS with Less courses initiated by Andrei, a great developer from our community, delighted us from the very beginning. We started it, and the engagement is great.

Today, a new part of this course is available for you. Here you can find all the parts of Andrei's puzzle, to form a whole and give meaning to this course. Enjoy!

Learning CSS with Less - Handling overflow

  1. Topics of discussion
  2. Overflow properties

1. Topics of discussion

In this tutorial, we are going to talk about how you can handle overflow in CSS. So, let's have some fun.

2. Overflow properties

When it comes to CSS, handling overflow refers to handling what happens when the content of an element is so large it overflows outside of its borders. We already had a brief look at the overflow property in the previous tutorial. Value-wise, you have a few options:

The overflow property sets the overflow values for both the horizontal and vertical parts of an element. You can set different values for these by using the overflow-x and overflow-y properties for horizontal overflow and vertical overflow respectively.

Here are some examples:

This is an element with hidden overflow, which means that whatever exceeds the size of an element will overflow outside of it.
Scroll
This is an element with auto overflow, which means that whatever exceeds the size of an element will overflow outside of it.
This is an element with visible overflow, which means that whatever exceeds the size of an element will overflow outside of it.
  

And here is the CSS:

.visible-overflow {
  height: 50px;
  width: 50px;
  overflow: visible;
  border: 1px solid black;
}

.hidden-overflow {
  height: 50px;
  width: 50px;
  overflow: hidden;
  border: 1px solid black;
}

.scroll-overflow {
  height: 100px;
  width: 100px;
  overflow: scroll;
  border: 1px solid black;
}

.auto-overflow {
  height: 200px;
  width: 200px;
  overflow: auto;
  border: 1px solid black;
}

And that about covers it for this tutorial. In the next one, we are going to discuss maximum values for width and height. See you then.

Interested in finding out more about the author? Andrei's world is just a click away!

If you are interested in working with a team of expert remote developers, contact us TODAY!