diff --git a/components/dropdown/dropdown-popover-mixin.js b/components/dropdown/dropdown-popover-mixin.js
index ca71b6174fb..1fe3b68b524 100644
--- a/components/dropdown/dropdown-popover-mixin.js
+++ b/components/dropdown/dropdown-popover-mixin.js
@@ -186,9 +186,17 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		this._hasHeaderSlotContent = false;
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#resizeObserver.disconnect();
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this.#contentElement = this.shadowRoot?.querySelector('.dropdown-content');
+		if (this.#contentElement) {
+			this.#resizeObserver.observe(this.#contentElement);
+		}
 		this.addEventListener('d2l-popover-open', this.#handlePopoverOpen);
 		this.addEventListener('d2l-popover-close', this.#handlePopoverClose);
 		this.addEventListener('d2l-popover-position', this.#handlePopoverPosition);
@@ -291,6 +299,9 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 	}
 
 	#contentElement;
+	#resizeObserver = new ResizeObserver(() => {
+		this.#toggleScrollStyles();
+	});
 
 	#adaptMobileTrayLocation(val) {
 		switch (val) {
diff --git a/components/dropdown/test/dropdown-content.vdiff.js b/components/dropdown/test/dropdown-content.vdiff.js
index 05621c143ba..c0c74197188 100644
--- a/components/dropdown/test/dropdown-content.vdiff.js
+++ b/components/dropdown/test/dropdown-content.vdiff.js
@@ -54,6 +54,11 @@ const scrollContent = `
 	${Array.from(Array(12).keys()).map((key) => `<div>Line ${key + 1}</div>`).join('')}
 	<div>Bottom</div>
 `;
+const noScrollContent = `
+	<div>Top</div>
+	<div>Line 1</div>
+	<div>Bottom</div>
+`;
 const scroll = html`${unsafeHTML(scrollContent)}`;
 
 describe('dropdown-content', () => {
@@ -133,8 +138,8 @@ describe('dropdown-content', () => {
 			{ name: 'both', allColorModes: true, initialContent: scroll, scrollTo: 75 },
 			{ name: 'bottom', allColorModes: true, initialContent: scroll },
 			{ name: 'top', allColorModes: true, initialContent: scroll, scrollTo: 1000 },
-			{ name: 'async-content-added', initialContent: 'Initial Content', asyncContent: scrollContent },
-			{ name: 'async-content-removed', initialContent: scroll, asyncContent: 'Updated' }
+			{ name: 'async-content-added', initialContent: unsafeHTML(noScrollContent), asyncContent: scrollContent },
+			{ name: 'async-content-removed', initialContent: scroll, asyncContent: noScrollContent }
 		].forEach(({ name, allColorModes, initialContent, scrollTo, asyncContent }) => {
 			it(name, async() => {
 				const elem = await fixture(
diff --git a/components/dropdown/test/golden/dropdown-content/chromium/shadows-async-content-added.png b/components/dropdown/test/golden/dropdown-content/chromium/shadows-async-content-added.png
index 8079785f6d8..e530b54056e 100644
Binary files a/components/dropdown/test/golden/dropdown-content/chromium/shadows-async-content-added.png and b/components/dropdown/test/golden/dropdown-content/chromium/shadows-async-content-added.png differ
diff --git a/components/dropdown/test/golden/dropdown-content/chromium/shadows-async-content-removed.png b/components/dropdown/test/golden/dropdown-content/chromium/shadows-async-content-removed.png
index 75e29289c76..f0eedb5e00d 100644
Binary files a/components/dropdown/test/golden/dropdown-content/chromium/shadows-async-content-removed.png and b/components/dropdown/test/golden/dropdown-content/chromium/shadows-async-content-removed.png differ