diff --git a/x-pack/plugins/lens/public/visualization_container.scss b/x-pack/plugins/lens/public/visualization_container.scss
new file mode 100644
index 0000000000000..e5c359112fe4b
--- /dev/null
+++ b/x-pack/plugins/lens/public/visualization_container.scss
@@ -0,0 +1,3 @@
+.lnsVisualizationContainer {
+ overflow: auto;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/visualization_container.test.tsx b/x-pack/plugins/lens/public/visualization_container.test.tsx
index b29f0a5d783f9..454399ec90121 100644
--- a/x-pack/plugins/lens/public/visualization_container.test.tsx
+++ b/x-pack/plugins/lens/public/visualization_container.test.tsx
@@ -60,4 +60,13 @@ describe('VisualizationContainer', () => {
expect(reportingEl.prop('style')).toEqual({ color: 'blue' });
});
+
+ test('combines class names with container class', () => {
+ const component = mount(
+ Hello!
+ );
+ const reportingEl = component.find('[data-shared-item]').first();
+
+ expect(reportingEl.prop('className')).toEqual('myClass lnsVisualizationContainer');
+ });
});
diff --git a/x-pack/plugins/lens/public/visualization_container.tsx b/x-pack/plugins/lens/public/visualization_container.tsx
index fb7a1268192a8..3ca8d5de932d7 100644
--- a/x-pack/plugins/lens/public/visualization_container.tsx
+++ b/x-pack/plugins/lens/public/visualization_container.tsx
@@ -5,6 +5,9 @@
*/
import React from 'react';
+import classNames from 'classnames';
+
+import './visualization_container.scss';
interface Props extends React.HTMLAttributes {
isReady?: boolean;
@@ -15,9 +18,21 @@ interface Props extends React.HTMLAttributes {
* This is a convenience component that wraps rendered Lens visualizations. It adds reporting
* attributes (data-shared-item, data-render-complete, and data-title).
*/
-export function VisualizationContainer({ isReady = true, reportTitle, children, ...rest }: Props) {
+export function VisualizationContainer({
+ isReady = true,
+ reportTitle,
+ children,
+ className,
+ ...rest
+}: Props) {
return (
-