title: Resizing div containing text on change of window size
body: <p>I have implemented a function for changing the size of a div containing text, debounced for x amount of time.</p>
  
  <p>And this is working when reducing the screen size, however, it does not work when expanding the screen back again.
  This may be due to property <code>scrollHeight</code>, however I am unsure of a better way of implementing this.</p>
  
  <p>I do not wish to use JQuery, please help.</p>
  
  <p><a href="https://codepen.io/physicsboy/pen/BayoLZX" rel="nofollow noreferrer">https://codepen.io/physicsboy/pen/BayoLZX</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const box = document.getElementById('box');
  const scrl = box.scrollHeight;
  
  box.style.height = `${scrl}px`;
  
  console.log({box});
  
  window.addEventListener('resize', _.debounce(() =&gt; {
    console.log('debounced');
    reset()
  }, 500));
  
  function reset() {
    console.log('resizing');
    const scrlHeight = box.scrollHeight;
    console.log(`height: ${box.style.height} - scrollheight: ${scrlHeight}`);
    box.style.height = `${scrlHeight}px`;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box {
    margin: auto auto;
    padding: 20px;
    max-width: 500px;
    height: 200px;
    background: lightgrey;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non dolor nec risus cursus convallis. Sed tempor libero eu est elementum, id molestie purus cursus. Nunc pulvinar metus non ante tincidunt tempus. Proin metus mi, varius sed purus et, feugiat auctor lectus. Pellentesque elementum dui quis nunc consectetur, vitae iaculis risus laoreet. Fusce velit leo, tristique vitae faucibus eget, sagittis sed libero. Duis eleifend interdum vulputate. Vivamus vehicula commodo leo, quis rhoncus mi pharetra nec. Vivamus elementum sodales arcu nec consectetur. Nullam rhoncus risus metus, id rhoncus lacus vulputate vel. Nam sit amet egestas arcu, et ornare elit. Pellentesque fringilla volutpat urna, vel ullamcorper velit volutpat at. Pellentesque convallis tristique consequat. Etiam at diam vitae urna bibendum maximus. Nulla elementum, ex vitae tempor egestas, sem sapien pulvinar orci, et scelerisque dolor ante at nisi.
  
  Donec in urna sed est tincidunt gravida. Proin ullamcorper sed nunc et scelerisque. Mauris sit amet arcu a odio tincidunt hendrerit. In consectetur justo ipsum, vel posuere erat tincidunt vel. Nullam dignissim ornare nunc, a porttitor felis placerat in. Etiam feugiat sem sit amet tristique congue. Donec ut arcu sit amet mauris volutpat pellentesque a a felis. Quisque purus tellus, placerat in congue nec, lacinia in lectus. Nam eget ante faucibus, facilisis odio id, dignissim lorem. Vivamus porta pharetra velit a cursus. Phasellus ac volutpat ex, nec cursus sem. Pellentesque congue sem consectetur, consectetur justo at, gravida ex. Quisque est nunc, tempus sed massa sed, consequat fringilla nulla.
  
  Phasellus consectetur, velit id suscipit volutpat, mauris mi tempus augue, sit amet dapibus dolor ipsum eget dui. Vestibulum finibus lectus facilisis feugiat accumsan. Duis lectus felis, blandit et massa ut, eleifend sagittis lacus. Pellentesque imperdiet pharetra nisi eget venenatis. Nullam tincidunt leo nec sem lacinia auctor. 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>