x
<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><script>function myFunction() { const element = document.getElementById("content"); element.style.height = element.scrollHeight + "px"; element.style.width = element.scrollWidth + "px";}</script></body></html>