How to make chart fit the react-tabs inside React-Grid-Layout?

Hi @danez
Please help. I want put the chart in a tab of a grid. I have successfully put the chart in the grid (React Grid Layout) and the chart size fits the grid, but when i put tab (React-Tab) in a grid and then the chart inside the tab. The chart wont fit anymore. How to solve?

class TvChart extends React.Component {
  render() {
    return (
      <div>
        <Tabs style={this.props.style}>
          <TabList>
            <Tab>Chart</Tab>
            <Tab>Depth</Tab>
          </TabList>
          <TabPanel>
            <Card>
              <TVChartContainer />
            </Card>
          </TabPanel>
          <TabPanel>
            <h5>Depth</h5>
          </TabPanel>
        </Tabs>
      </div>
    );
  }
}

this is the css

.TVChartContainer {
    height: 100%;
    width: 100%;
}

and this is the parent style

const styles = {
  main: {
    backgroundColor: "#ffffff",
    fontSize: "10px",
    height: "inherit"
  },
  orderbook: {
    minHeight: "220px",
    minWidth: "100px"
  },
  ask: {
    width: "50%"
  },
  bid: {
    width: "50%",
    borderRight: "1px solid #151d2b"
  }
};

but this one works, the chart fits the grid completely.

class TvChart extends React.Component {
  render() {
    return (
      <Card style={this.props.style.main}>
        <TVChartContainer />
      </Card>
    );
  }
}

I appreciate if you can help.

Regards,

Ian

No se indica ningún archivo del repositorio ni ninguna prueba. Empieza reproduciendo el diseño anidado de React-Grid-Layout, react-tabs y TVChartContainer descrito en el issue, y después inspecciona cómo se pasan la altura y la anchura a través de los paneles de pestañas. Se considera terminado cuando se haya identificado una corrección a nivel del repositorio o se haya documentado el comportamiento de dimensionamiento requerido con una prueba de regresión, si el proyecto admite una.