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

Không có tệp repository hoặc test nào được nêu. Hãy bắt đầu bằng việc tái hiện layout lồng nhau của React-Grid-Layout, react-tabs và TVChartContainer từ issue, sau đó kiểm tra cách chiều cao và chiều rộng được truyền qua các tab panel. Công việc được xem là hoàn tất khi xác định được một bản sửa ở cấp repository hoặc ghi lại hành vi định kích thước cần thiết bằng một regression test nếu dự án hỗ trợ.