diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 2412109185c..f2ed423294d 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -56,17 +56,21 @@
     </div>
   </mat-sidenav>
 
-  <main class="sidenav-content" [id]="pageId" role="main">
-    <div id="main-content" tabindex="-1"></div>
-    <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
-    <aio-doc-viewer [class.no-animations]="disableAnimations" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
-    </aio-doc-viewer>
-    <aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
-  </main>
+  <section class="sidenav-content-container">
 
-  <div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (wheel)="restrainScrolling($event)">
-    <aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
-  </div>
+    <main class="sidenav-content" [id]="pageId" role="main">
+      <div id="main-content" tabindex="-1"></div>
+      <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
+      <aio-doc-viewer [class.no-animations]="disableAnimations" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
+      </aio-doc-viewer>
+      <aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
+    </main>
+
+    <div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (wheel)="restrainScrolling($event)">
+      <aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
+    </div>
+
+  </section>
 
   <footer class="no-print">
     <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo"></aio-footer>
diff --git a/aio/src/styles/1-layouts/sidenav/_sidenav.scss b/aio/src/styles/1-layouts/sidenav/_sidenav.scss
index 4bf65dd1269..d17b79ece94 100644
--- a/aio/src/styles/1-layouts/sidenav/_sidenav.scss
+++ b/aio/src/styles/1-layouts/sidenav/_sidenav.scss
@@ -13,13 +13,17 @@ mat-sidenav-container.sidenav-container {
   transform: none;
 
   &.has-floating-toc {
-    .sidenav-content {
-      margin-right: 18vw;
+    .sidenav-content-container {
+      padding-right: 18vw;
     }
   }
 
-  .sidenav-content {
+  .sidenav-content-container {
     height: auto;
+
+    .sidenav-content {
+      overflow-x: auto;
+    }
   }
 
   mat-sidenav.sidenav {