JSFiddle - React, Tailwind, and code Playground

HTML

<input id="after" type="checkbox">
<label for="after">Enable cross-browser padding bottom hack with pseudo element</label>
<br>
<input id="padding" type="checkbox">
<label for="padding">Visualize padding bottom</label>
    
<div id="container">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu urna a est varius sagittis quis non neque. Aliquam erat volutpat. Nunc dictum congue est, et sagittis mauris facilisis in. Suspendisse quis tempor lacus. Pellentesque ipsum mi, vehicula vitae nibh in, elementum dictum mauris. Suspendisse quis tempor lacus. Pellentesque ipsum mi, vehicula vitae nibh in, elementum dictum mauris Proin hendrerit ligula lorem, ut molestie mauris dapibus et. Duis eu leo commodo, commodo risus at, sodales ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu urna a est varius sagittis quis non neque. Aliquam erat volutpat. Nunc dictum congue est, et sagittis mauris facilisis in. Suspendisse quis tempor lacus. Pellentesque ipsum mi, vehicula vitae nibh in, elementum dictum mauris. Suspendisse quis tempor lacus. Pellentesque ipsum mi, vehicula vitae nibh in, elementum dictum mauris Proin hendrerit ligula lorem, ut molestie mauris dapibus et. Duis eu leo commodo, commodo risus at, sodales ligula. Integer non elit magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu urna a est varius sagittis quis non neque. Aliquam erat volutpat. Nunc dictum congue est, et sagittis mauris facilisis in. Suspendisse quis tempor lacus. Pellentesque ipsum mi, vehicula vitae nibh in, elementum dictum mauris. Proin hendrerit ligula lorem, ut molestie mauris dapibus et. Duis eu leo commodo, commodo risus at, sodales ligula. Integer non elit magna.    
  </div>
</div>

CSS

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 20px;
}

input {
  margin-bottom: 20px;    
}

input[type="checkbox"]#after:checked ~ #container {
  padding-bottom: 0;
}

input[type="checkbox"]#after:checked ~ #container:after {
  content: "";
  height: 20px;
  display: block; 
}

input[type="checkbox"]#padding:checked ~ #container:after {
  background: coral;    
}

#container {
  padding: 20px;
  overflow: auto;
  height: 200px;
  border: 1px solid #aaa;
}