what exactly overflow does in css?

Question

I don't understand what exactly it means and the Difference between overflow:auto; and overflow:scroll; I just know that when overflow is clipped both of them add a scroll bar to the element to see rest of the content

Answer 1

overflow:scroll; will always add a scroll bar, even if there is nothing to scroll. Overflow auto will put the scroll bar if its clipped and wont if its not clipped. See what I did here? Classes 1 and 4 are set to overflow: auto; but with different length content but 1 shows a scroll and the other doesn't. Classes 2 and 3 have different length content as well, but will always show the scroll bar.

.one {
  overflow: auto;
  width: 150px;
  height: 150px;
}

.two {
  overflow: scroll;
}

.three {
  overflow: scroll;
}

.four {
  overflow: auto;
  width: 150px;
  height: 150px;
}

<div class="one">
hello one af afadsfadsf asdfasdf asdf adsfasdf asf asf asdf afa dfdaf asdf asf asf asfasdf asdf asdf sdfads fsadfadsf sdafadfasdfadsfadsfa fafsdadsfadfdsaf adsf asdfasd fasdf asdf dsafasdf asdf asf asf adf asdfadsf adsfa sdfsadf asf sadf sadf 
</div>
<br>
<br>
<div class="two">
hello two
</div>
<br>
<br>
<div class="three">
hello three af afadsfadsf asdfasdf asdf adsfasdf asf asf asdf afa dfdaf asdf asf asf asfasdf asdf asdf sdfads fsadfadsf sdafadfasdfadsfadsfa fafsdadsfadfdsaf adsf asdfasd fasdf asdf dsafasdf asdf asf asf adf asdfadsf adsfa sdfsadf asf sadf sadf 
</div>
<br>
<br>
<div class="four">
hello four
</div>