diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/_markdown.scss b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/_markdown.scss
deleted file mode 100644
index 661667288ad93..0000000000000
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/_markdown.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.tvbMarkdown {
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 auto;
-  position: relative;
-}
-
-.tvbMarkdown__content {
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  @include euiScrollBar;
-  &--middle {
-    justify-content: center;
-  }
-
-  &--bottom {
-    justify-content: flex-end;
-  }
-
-  &-isScrolling {
-    overflow: auto;
-  }
-}
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
index 6dad9c39eb3d0..cf1fc266b0e36 100644
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { get } from 'lodash';
-import { ClassNames } from '@emotion/react';
+import { ClassNames, css } from '@emotion/react';
 import { Markdown } from '@kbn/kibana-react-plugin/public';
 
 import { ErrorComponent } from '../../error';
@@ -19,7 +19,36 @@ import { replaceVars } from '../../lib/replace_vars';
 import { convertSeriesToVars } from '../../lib/convert_series_to_vars';
 import { isBackgroundInverted } from '../../../lib/set_is_reversed';
 
-import './_markdown.scss';
+const markdownStyles = css`
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  position: relative;
+`;
+
+const markdownContentStyles = css`
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  &.tvbMarkdown__content--middle {
+    justify-content: center;
+  }
+
+  &.tvbMarkdown__content--bottom {
+    justify-content: flex-end;
+  }
+
+  &.tvbMarkdown__content-isScrolling {
+    overflow: auto;
+  }
+`;
 
 function MarkdownVisualization(props) {
   const {
@@ -54,6 +83,7 @@ function MarkdownVisualization(props) {
     });
 
     const contentClasses = classNames(
+      'eui-scrollBar',
       'tvbMarkdown__content',
       `tvbMarkdown__content--${model.markdown_vertical_align}`,
       { 'tvbMarkdown__content-isScrolling': model.markdown_scrollbars },
@@ -63,7 +93,7 @@ function MarkdownVisualization(props) {
     const markdownError = markdownSource instanceof Error ? markdownSource : null;
 
     markdown = (
-      <div className="tvbMarkdown" data-test-subj="tsvbMarkdown">
+      <div className="tvbMarkdown" css={markdownStyles} data-test-subj="tsvbMarkdown">
         {markdownError && <ErrorComponent error={markdownError} />}
         <ClassNames>
           {({ css, cx }) => (
@@ -71,9 +101,14 @@ function MarkdownVisualization(props) {
               className={cx(
                 contentClasses,
                 // wrapping select for markdown body to make sure selector specificity wins over base styles
-                css(`.kbnMarkdown__body {
-                  ${model.markdown_css}
-                }`)
+                css(
+                  [
+                    `.kbnMarkdown__body {
+                      ${model.markdown_css}
+                    }`,
+                  ],
+                  markdownContentStyles
+                )
               )}
             >
               <div>