W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
#content {
  height: 100px;
  width: 100px;
  background-color: coral;
  padding: 15px;
  border: 10px solid black;
  margin: 10px;
  overflow: scroll;
}
</style>

</head>
<body>
<h1>The Element Object</h1>
<h2>The scrollHeight and scrollWidth Properties</h2>

<button onclick="myFunction()">Adjust</button>

<p>Click "Adjust" to set the width and height of "content" to the values returned from scrollHeight and scrollWidth.</p>

<div id="content">Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..</div>

</body>
</html>