title: Getting absolutely positioned unknown height children to resize the parent on window resize
body: <h1><a href="https://codepen.io/umbriel/pen/MxazRE" rel="nofollow noreferrer">https://codepen.io/umbriel/pen/MxazRE</a></h1>
  
  <p>I have a slideshow that the user changes which slide to look at by swiping their mouse cursor horizontally over the slide container.</p>
  
  <p>Because the children (slides) are absolutely positioned I need to dynamically update the height of the parent (slideshow container). Otherwise </p>
  
  <p>Because I dont know the height of the individual slides I need to calculate the tallest div and give that to the parent </p>
  
  <p>Code below to get tallest element below:</p>
  
  <pre><code>    function getTallestSegment(element) {
        let elementsHeight = [];
        let height = 0;
        element.forEach(child =&gt; {
          elementsHeight.push(child.scrollHeight);
        });
        height = Math.max(...elementsHeight);
        return height;
      } 
  </code></pre>
  
  <p>And the window resize snippet to update the parent height dynamically. </p>
  
  <pre><code>    window.onresize = function(e){
        Object.assign(item.style, {
          height: getTallestSegment(getChildren) + "px"
        });
      };
  </code></pre>
  
  <p>Now it works, but only only when I downsize the window:
  Please have a look in the gif. Notice the height value in the bottom right corner is in fact changing. But only when I downsize the window, <strong>I want it to work when I expand the window width as well!</strong> </p>
  
  <p>Any takers to figure out to make the parent resize in both directions?</p>
  
  <p>Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/xHYGH.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xHYGH.gif" alt="gif of problem"></a></p>