title: Make div scrollable is the content exceeds the height of the viewport
body: <p>Hi I have a div like this : </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="toc"&gt;
    &lt;div&gt;
      &lt;h1 id="rs-doc-sql-compliance" class="header-toc"&gt;
        &lt;a href="#rs-doc-sql-compliance"&gt;&lt;span&gt;SQL compliance&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;h2 id="rs-doc-select-statements" class="header-toc"&gt;
              &lt;a href="#rs-doc-select-statements"
                &gt;&lt;span&gt;SELECT Statements&lt;/span&gt;&lt;/a
              &gt;
              &lt;ul&gt;
                &lt;li&gt;
                  &lt;h3 id="rs-doc-select-syntax" class="header-toc"&gt;
                    &lt;a href="#rs-doc-select-syntax"&gt;&lt;span&gt;SELECT Syntax&lt;/span&gt;&lt;/a&gt;
                  &lt;/h3&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul&gt;
                &lt;li&gt;
                  &lt;h3 id="rs-doc-examples" class="header-toc"&gt;
                    &lt;a href="#rs-doc-examples"&gt;&lt;span&gt;Examples&lt;/span&gt;&lt;/a&gt;
                  &lt;/h3&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul&gt;
                &lt;li&gt;
                  &lt;h3 id="rs-doc-aggregate-functions" class="header-toc"&gt;
                    &lt;a href="#rs-doc-aggregate-functions"
                      &gt;&lt;span&gt;Aggregate Functions&lt;/span&gt;&lt;/a
                    &gt;
                    &lt;ul&gt;
                      &lt;li&gt;
                        &lt;h4 id="rs-doc-count" class="header-toc"&gt;
                          &lt;a href="#rs-doc-count"&gt;&lt;span&gt;COUNT&lt;/span&gt;&lt;/a&gt;
                        &lt;/h4&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;ul&gt;
                      &lt;li&gt;
                        &lt;h4 id="rs-doc-count_distinct" class="header-toc"&gt;
                          &lt;a href="#rs-doc-count_distinct"
                            &gt;&lt;span&gt;COUNT_DISTINCT&lt;/span&gt;&lt;/a
                          &gt;
                        &lt;/h4&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;ul&gt;
                      &lt;li&gt;
                        &lt;h4 id="rs-doc-avg" class="header-toc"&gt;
                          &lt;a href="#rs-doc-avg"&gt;&lt;span&gt;AVG&lt;/span&gt;&lt;/a&gt;
                        &lt;/h4&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;ul&gt;
                      &lt;li&gt;
                        &lt;h4 id="rs-doc-sum" class="header-toc"&gt;
                          &lt;a href="#rs-doc-sum"&gt;&lt;span&gt;SUM&lt;/span&gt;&lt;/a&gt;
                        &lt;/h4&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/h3&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul&gt;
                &lt;li&gt;
                  &lt;h3 id="rs-doc-join-queries" class="header-toc"&gt;
                    &lt;a href="#rs-doc-join-queries"&gt;&lt;span&gt;JOIN Queries&lt;/span&gt;&lt;/a&gt;
                    &lt;ul&gt;
                      &lt;li&gt;
                        &lt;h4 id="rs-doc-inner-join" class="header-toc"&gt;
                          &lt;a href="#rs-doc-inner-join"&gt;&lt;span&gt;Inner Join&lt;/span&gt;&lt;/a&gt;
                        &lt;/h4&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;ul&gt;
                      &lt;li&gt;
                        &lt;h4 id="rs-doc-left-join" class="header-toc"&gt;
                          &lt;a href="#rs-doc-left-join"&gt;&lt;span&gt;Left Join&lt;/span&gt;&lt;/a&gt;
                        &lt;/h4&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/h3&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/h2&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>And here the CSS I'm using : </p>
  
  <pre><code>#tocOut{
    position:sticky;
    padding-top:8px;
    margin-top: 8px;
    padding-left: 8px;
    top:8px;
  }
  </code></pre>
  
  <p>I want to make this <strong>div</strong> scrollable if the content exceeds the pages viewport here's an example : </p>
  
  <p><a href="https://i.stack.imgur.com/ep8mt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ep8mt.png" alt="Screenshot"></a></p>
  
  <p>In this Screenshot the content is way more than the page's height but I can't make it scrollable, I've tried <code>overflow-y: scroll;</code> but didn't work out for me, and the scrollbar show even if the content is less than the viewport of the page.</p>
  
  <p>Thanks For helping</p>