fix: pr comments

Remove legendId, fix safari max-height inheritance issue, remove uneeded legendList styles, revert
empty state flex value.

Author: nickofthyme

src/components/_container.scss

@@ -3,7 +3,7 @@
  */
 
 .echContainer {
-  flex: 1 1 auto;
+  flex: 1;
   position: relative;
 
   &:hover {

src/components/chart.tsx

@@ -4,7 +4,6 @@ import { Provider } from 'mobx-react';
 
 import { SpecsParser } from '../specs/specs_parser';
 import { ChartStore } from '../chart_types/xy_chart/store/chart_state';
-import { htmlIdGenerator } from '../utils/commons';
 import { AnnotationTooltip } from './annotation_tooltips';
 import { ChartResizer } from './chart_resizer';
 import { Crosshair } from './crosshair';
@@ -35,7 +34,6 @@ export class Chart extends React.Component<ChartProps, ChartState> {
     renderer: 'canvas',
   };
   private chartSpecStore: ChartStore;
-  private legendId: string;
   constructor(props: any) {
     super(props);
     this.chartSpecStore = new ChartStore();
@@ -48,7 +46,6 @@ export class Chart extends React.Component<ChartProps, ChartState> {
         legendPosition,
       });
     });
-    this.legendId = htmlIdGenerator()('legend');
   }
 
   static getContainerStyle = (size: any): CSSProperties => {
@@ -91,7 +88,7 @@ export class Chart extends React.Component<ChartProps, ChartState> {
     return (
       <Provider chartStore={this.chartSpecStore}>
         <div style={containerStyle} className={chartClassNames}>
-          <Legend legendId={this.legendId} />
+          <Legend />
           <SpecsParser>{this.props.children}</SpecsParser>
           <div className="echContainer">
             <ChartResizer />

src/components/legend/_index.scss

@@ -1,4 +1,3 @@
 @import 'variables';
 @import 'legend';
-@import 'legend_list';
 @import 'legend_item';

src/components/legend/_legend_list.scss

@@ -10,7 +10,6 @@ import { Theme } from '../../utils/themes/theme';
 
 interface LegendProps {
   chartStore?: ChartStore; // FIX until we find a better way on ts mobx
-  legendId: string;
 }
 
 interface LegendState {
@@ -57,7 +56,6 @@ class LegendComponent extends React.Component<LegendProps, LegendState> {
   }
 
   render() {
-    const { legendId } = this.props;
     const {
       legendInitialized,
       chartInitialized,
@@ -73,16 +71,16 @@ class LegendComponent extends React.Component<LegendProps, LegendState> {
       return null;
     }
 
-    const legendStyle = this.getLegendStyle(postion, chartTheme);
+    const legendContainerStyle = this.getLegendStyle(postion, chartTheme);
     const legendListStyle = this.getLegendListStyle(postion, chartTheme);
     const legendClasses = classNames('echLegend', `echLegend--${postion}`, {
       'echLegend--debug': debug,
       invisible: !chartInitialized.get(),
     });
 
     return (
-      <div ref={this.echLegend} className={legendClasses} style={legendStyle} id={legendId}>
-        <div className="echLegendListContainer">
+      <div ref={this.echLegend} className={legendClasses}>
+        <div style={legendContainerStyle} className="echLegendListContainer">
           <div style={legendListStyle} className="echLegendList">
             {[...legendItems.values()].map(this.renderLegendElement)}
           </div>