diff --git a/source/css/_common/outline/sidebar/sidebar-toc.styl b/source/css/_common/outline/sidebar/sidebar-toc.styl
index 253191dc3..b926524a2 100644
--- a/source/css/_common/outline/sidebar/sidebar-toc.styl
+++ b/source/css/_common/outline/sidebar/sidebar-toc.styl
@@ -34,19 +34,18 @@ if (hexo-config('toc.enable')) {
     .nav {
       if (not hexo-config('toc.expand_all')) {
         .nav-child {
-          --height: 0;
           height: 0;
           opacity: 0;
           overflow: hidden;
-          transition-property: height, opacity, visibility;
+          transition-property: height, opacity;
           transition: $transition-ease;
-          visibility: hidden;
         }
 
         .active > .nav-child {
-          height: var(--height, auto);
+          height: auto;
+          // https://caniuse.com/mdn-css_types_calc-size
+          height: calc-size(auto, size);
           opacity: 1;
-          visibility: unset;
         }
       }
 
diff --git a/source/js/utils.js b/source/js/utils.js
index 2bc2c8495..554e7d1b9 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -352,24 +352,16 @@ NexT.utils = {
     const target = navItemList[index];
     if (!target || target.classList.contains('active-current')) return;
 
-    const singleHeight = navItemList[navItemList.length - 1].offsetHeight;
-
     nav.querySelectorAll('.active').forEach(navItem => {
       navItem.classList.remove('active', 'active-current');
     });
     target.classList.add('active', 'active-current');
 
     let activateEle = target.querySelector('.nav-child') || target.parentElement;
-    let navChildHeight = 0;
 
     while (nav.contains(activateEle)) {
       if (activateEle.classList.contains('nav-item')) {
         activateEle.classList.add('active');
-      } else { // .nav-child or .nav
-        // scrollHeight isn't reliable for transitioning child items.
-        // The last nav-item in a list has a margin-bottom of 5px.
-        navChildHeight += (singleHeight * activateEle.childElementCount) + 5;
-        activateEle.style.setProperty('--height', `${navChildHeight}px`);
       }
       activateEle = activateEle.parentElement;
     }
@@ -408,16 +400,8 @@ NexT.utils = {
     const tocPanel = panelContainer.firstElementChild;
     const overviewPanel = panelContainer.lastElementChild;
 
-    let postTOCHeight = tocPanel.scrollHeight;
-    // For TOC activation, try to use the animated TOC height
-    if (index === 0) {
-      const nav = tocPanel.querySelector('.nav');
-      if (nav) {
-        postTOCHeight = parseInt(nav.style.getPropertyValue('--height'), 10);
-      }
-    }
     const panelHeights = [
-      postTOCHeight,
+      tocPanel.scrollHeight,
       overviewPanel.scrollHeight
     ];
     panelContainer.style.setProperty('--inactive-panel-height', `${panelHeights[1 - index]}px`);