diff --git a/static/css/theme.css b/static/css/theme.css
index db0e706ac2..99c5482d81 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1159,9 +1159,10 @@ option {
 
 #TableOfContents {
     font-size: 13px !important;
-    max-height: 85%;
-    overflow: auto;
+    max-height: 90vh;
+    overflow: hidden;
     padding: 15px 5px !important;
+    position: relative; /* PS */
 }
 
 #TableOfContents > ul > li > a {
diff --git a/static/js/theme.js b/static/js/theme.js
index 78b7dd4205..f8502f23da 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -427,6 +427,7 @@ function initToc(){
     function showToc(){
         var b = document.querySelector( 'body' );
         b.classList.toggle( 'toc-flyout' );
+        pst && pst.update();
     }
 
     document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav );
@@ -434,10 +435,12 @@ function initToc(){
     document.querySelector( '#toc-overlay' ).addEventListener( 'click', showToc );
     var t = document.querySelector( '#toc-menu' );
     var p = document.querySelector( '.progress' );
+    var pst;
     if( t && p ){
         // we may not have a toc
         t.addEventListener( 'click', showToc );
         p.addEventListener( 'click', showToc );
+        pst = new PerfectScrollbar('#TableOfContents');
     }
 }