diff --git a/.changeset/techdocs-slow-teachers-sleep.md b/.changeset/techdocs-slow-teachers-sleep.md
new file mode 100644
index 0000000000..5e50d92d2b
--- /dev/null
+++ b/.changeset/techdocs-slow-teachers-sleep.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Long sidebars will no longer overflow the footer and will properly show a scrollbar when needed.
diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt
index 5a78e71496..b8e432dd98 100644
--- a/.github/styles/vocab.txt
+++ b/.github/styles/vocab.txt
@@ -263,6 +263,7 @@ sanitization
 scaffolded
 scaffolder
 Scaffolder
+scrollbar
 seb
 semlas
 semver
diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 6aa5c99be4..9ce9ad5d6d 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -442,16 +442,42 @@ export const useTechDocsReaderDom = (
             }
 
             .md-sidebar {
-              height: calc(100% - 100px);
+              bottom: 75px;
               position: fixed;
               width: 16rem;
+              overflow-y: auto;
+              overflow-x: hidden;
+              scrollbar-color: rgb(193, 193, 193) #eee;
+              scrollbar-width: thin;
             }
             .md-sidebar .md-sidebar__scrollwrap {
-              max-height: calc(100% - 100px);
+              width: calc(16rem - 10px);
             }
             .md-sidebar--secondary {
               right: ${theme.spacing(3)}px;
             }
+            .md-sidebar::-webkit-scrollbar {
+              width: 5px;
+            }
+            .md-sidebar::-webkit-scrollbar-button {
+              width: 5px;
+              height: 5px;
+            }
+            .md-sidebar::-webkit-scrollbar-track {
+              background: #eee;
+              border: 1 px solid rgb(250, 250, 250);
+              box-shadow: 0px 0px 3px #dfdfdf inset;
+              border-radius: 3px;
+            }
+            .md-sidebar::-webkit-scrollbar-thumb {
+              width: 5px;
+              background: rgb(193, 193, 193);
+              border: transparent;
+              border-radius: 3px;
+            }
+            .md-sidebar::-webkit-scrollbar-thumb:hover {
+              background: rgb(125, 125, 125);
+            }
 
             .md-content {
               max-width: calc(100% - 16rem * 2);
@@ -474,6 +500,12 @@ export const useTechDocsReaderDom = (
               background-color: unset;
             }
 
+            @media screen and (min-width: 76.25em) {
+              .md-sidebar {
+                height: auto;
+              }
+            }
+            
             @media screen and (max-width: 76.1875em) {
               .md-nav {
                 transition: none !important;