According to W3Schools definition: CSS Overflow Property
Definition
The overflow property sets what happens if the content of an element overflow its area.
For example we have a container, that contains varying amount of data. If you set the width and height explicitly on it and don’t want it to expand to hold the data, we can make us of the CSS overflow. Simply specify the dimension of the container, then specify overflow: auto.
.container-div {
width: 400px;
height: 300px;
overflow: auto;
}
This will put a scrollbar to accommodate the content without stretching / expanding its dimensions.
On the other hand, there are times when you don’t need to display the rest of the content if it overflows its area, and don’t even want to display a scrollbar. overflow: hidden comes into play. By specifying the container’s dimension, whenever the content overflows its area, the the rest of the content is not displayed. Here is the code.
.container-div {
width: 100px;
height: 25px;
overflow: hidden;
}