From b6f25e09d26a7fe6f10368aac32f598a24517ad5 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 19 Jul 2022 09:34:42 -0400
Subject: [PATCH] fixes #815

---
 docs/resources/changelog.md                  | 1 +
 src/components/tab-group/tab-group.styles.ts | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 0d3eded08..480540e55 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Changed the type of component styles from `CSSResult` to `CSSResultGroup` [#828](https://github.com/shoelace-style/shoelace/issues/828)
 - Fixed a bug in `<sl-tab-group>` where the divider was on the wrong side when using `placement="end"`
+- Fixed a bug in `<sl-tab-group>` that caused nested tab groups to scroll when using `placement="start|end"` [#815](https://github.com/shoelace-style/shoelace/issues/815)
 - Updated Bootstrap Icons to 1.9.1
 
 ## 2.0.0-beta.78
diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts
index 81406fc1a..55e63f5ca 100644
--- a/src/components/tab-group/tab-group.styles.ts
+++ b/src/components/tab-group/tab-group.styles.ts
@@ -18,12 +18,12 @@ export default css`
     border-radius: 0;
   }
 
-  .tab-group .tab-group__tabs {
+  .tab-group__tabs {
     display: flex;
     position: relative;
   }
 
-  .tab-group .tab-group__indicator {
+  .tab-group__indicator {
     position: absolute;
     transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;
   }
@@ -33,6 +33,10 @@ export default css`
     padding: 0 var(--sl-spacing-x-large);
   }
 
+  .tab-group__body {
+    overflow: auto;
+  }
+
   .tab-group__scroll-button {
     display: flex;
     align-items: center;