[Lens] Fix overflow in printable report

x-pack/plugins/lens/public/visualization_container.scss

@@ -0,0 +1,3 @@
+.lnsVisualizationContainer {
+  overflow: auto;
+}

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(
+      <VisualizationContainer className="myClass">Hello!</VisualizationContainer>
+    );
+    const reportingEl = component.find('[data-shared-item]').first();
+
+    expect(reportingEl.prop('className')).toEqual('myClass lnsVisualizationContainer');
+  });
 });

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<HTMLDivElement> {
   isReady?: boolean;
@@ -15,9 +18,21 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
  * 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 (
-    <div data-shared-item data-render-complete={isReady} data-title={reportTitle} {...rest}>
+    <div
+      data-shared-item
+      data-render-complete={isReady}
+      className={classNames(className, 'lnsVisualizationContainer')}
+      data-title={reportTitle}
+      {...rest}
+    >
       {children}
     </div>
   );