title: ScrollSpy not working with dynamic height
body: <p>I'm working on a single-page website, and am trying to implement a scroll-spy feature:</p>
  <p>Here's what my navbar looks like:</p>
  <pre><code>&lt;nav class=&quot;menu&quot;&gt;
          &lt;ul class=&quot;nav-links&quot;&gt;
              &lt;li&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#about&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#aboutStem&quot;&gt;What is STEM&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#quotes&quot;&gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#accomplishments&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  <p>In addition to this, I have created sections for each link in the navbar.
  The scrollspy is as follows:</p>
  <pre><code>document.addEventListener('DOMContentLoaded', () =&gt; {
  
  const scrollSpy = () =&gt; {
      const targets = document.querySelectorAll('section');
      console.log(targets)
      const options = {
        threshold: 0.5,
      };
  
      if ('IntersectionObserver' in window) {
        const inView = target =&gt; {
          const interSecObs = new IntersectionObserver(entries =&gt; {
            entries.forEach(entry =&gt; {
              const elem = entry.target;
              const currentNav = document.querySelector(`[href='#${elem.id}']`);
              currentNav?.classList.toggle('active', entry.isIntersecting);
            })
          }, options);
          interSecObs.observe(target)
        };
        targets.forEach(inView);
  
      }
    };
  
    scrollSpy();
  
  })
  </code></pre>
  <p>The scrollspy works fine as long as I specify the absolute height of a section, however, for responsiveness, I am using <code>height: fit-content</code> and that is causing errors.</p>
  <p>Any help would be appreciated.</p>