<div class="default">
  Just as with width, height defines the content area’s height by default, as opposed tothe height of the visible element box. Any padding, borders, or margins on the top orbottom of the element box are added to the value for height, unless the value of box-sizing is different than content-box.
</div>

<div class="hidden">
  Just as with width, height defines the content area’s height by default, as opposed tothe height of the visible element box. Any padding, borders, or margins on the top orbottom of the element box are added to the value for height, unless the value of box-sizing is different than content-box.
</div>

<div class="scroll">
  Just as with width, height defines the content area’s height by default, as opposed tothe height of the visible element box. Any padding, borders, or margins on the top orbottom of the element box are added to the value for height, unless the value of box-sizing is different than content-box.
</div>
div{
  width: 200px;
  height: 100px;
  margin-top: 10px;
  border: 1px solid;
}

.default{}
.hidden{
  color: yellow;
  position: absolute;
  top: 0px;
  left: 220px;
  overflow: hidden;
}
.scroll{
  color: green;
  position: absolute;
  top: 0px;
  left: 430px;
  overflow: scroll;
}
body{
  background-color: rgb(30,30,30);
  color: white;
  font-family: verdana;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.