HTML CSS Exercise - Let padding and border not affect available width and height

HTML-CSS: Tips of the Day

Stacking Divs from Bottom to Top

If you only need this to work for modern browsers and IE 8+ you can use table positioning, vertical-align:bottom and max-height.

CSS Code:

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.content {
  max-height: 200px;
  overflow: auto;
} 

HTML Code:

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>  
  </div>
</div>

You can make elements stick to the bottom of their container with position:absolute, but it'll take them out of the flow. As a result they won't stretch and make the container to be scrollable.

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
} 

Ref: https://bit.ly/3pQttyU