diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-with-ordinal-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-with-ordinal-axis-visually-looks-correct-1-snap.png
index c05f4ecfc0..2176090196 100644
Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-with-ordinal-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-with-ordinal-axis-visually-looks-correct-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png
index b33a52eeb0..9a568f8e1b 100644
Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-adjust-legend-width-for-scrollbar-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-adjust-legend-width-for-scrollbar-1-snap.png
new file mode 100644
index 0000000000..0db947bbbc
Binary files /dev/null and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-adjust-legend-width-for-scrollbar-1-snap.png differ
diff --git a/integration/tests/legend_stories.test.ts b/integration/tests/legend_stories.test.ts
index 859f0a9b44..1d1e3ce9cf 100644
--- a/integration/tests/legend_stories.test.ts
+++ b/integration/tests/legend_stories.test.ts
@@ -69,6 +69,12 @@ describe('Legend stories', () => {
     });
   });
 
+  it('should adjust legend width for scrollbar', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/small-multiples-alpha--grid-lines&knob-Debug=true&knob-Show Legend=true',
+    );
+  });
+
   describe('Tooltip placement with legend', () => {
     it('should render tooltip with left legend', async () => {
       await common.expectChartWithMouseAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/legend--left', {
diff --git a/src/components/legend/_legend.scss b/src/components/legend/_legend.scss
index 1e48e0c5ee..3730528535 100644
--- a/src/components/legend/_legend.scss
+++ b/src/components/legend/_legend.scss
@@ -7,12 +7,6 @@
       grid-row-gap: $echLegendRowGap;
       margin-top: $echLegendRowGap;
       margin-bottom: $echLegendRowGap;
-
-      @include internetExplorerOnly {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-      }
     }
   }
 
@@ -34,7 +28,7 @@
   }
 
   &--debug {
-    background: red;
+    background: rgba(238, 130, 238, 0.2);
     position: relative;
   }
 
diff --git a/src/state/selectors/get_legend_size.ts b/src/state/selectors/get_legend_size.ts
index cf6b6bf4e3..638d6e600b 100644
--- a/src/state/selectors/get_legend_size.ts
+++ b/src/state/selectors/get_legend_size.ts
@@ -32,10 +32,12 @@ import { getSettingsSpecSelector } from './get_settings_specs';
 
 const getParentDimensionSelector = (state: GlobalChartState) => state.parentDimensions;
 
+const SCROLL_BAR_WIDTH = 6; // ~1em
 const MARKER_WIDTH = 16;
 const MARKER_LEFT_MARGIN = 4;
 const VALUE_LEFT_MARGIN = 4;
 const VERTICAL_PADDING = 4;
+const TOP_MARGIN = 2;
 
 /** @internal */
 export type LegendSizing = BBox & {
@@ -83,8 +85,13 @@ export const getLegendSizeSelector = createCachedSelector(
       MARKER_WIDTH + MARKER_LEFT_MARGIN + bbox.width + (showLegendDisplayValue ? VALUE_LEFT_MARGIN : 0);
     if (isVerticalAxis(position)) {
       const legendItemHeight = bbox.height + VERTICAL_PADDING * 2;
+      const legendHeight = legendItemHeight * labels.length + TOP_MARGIN;
+      const scollBarDimension = legendHeight > parentDimensions.height ? SCROLL_BAR_WIDTH : 0;
+
       return {
-        width: Math.floor(Math.min(legendItemWidth + spacingBuffer + actionDimension, verticalWidth)),
+        width: Math.floor(
+          Math.min(legendItemWidth + spacingBuffer + actionDimension + scollBarDimension, verticalWidth),
+        ),
         height: legendItemHeight,
         margin,
         position,