【React】RechartsのResponsiveContainerでウィンドウを小さくするときだけwidthが再計算されない問題について

発生した問題

• ReactライブラリであるRechartsのResponsiveContainerコンポーネントを使用。
• ブラウザ幅に応じてチャートの大きさを変更したい。
• ブラウザのウィンドウを大きくするときは再計算されるが、ウィンドウを小さくする時は再計算されない。

こんな感じ

※いま、趣味で作っているWebサービスです。

原因

こちらのissueで同問題が報告されていました。

フレックスボックスを使い、ResponsiveContainerの親要素がフレックスアイテムになると生じるとのこと。

どうやら、ResponsiveContainerの親要素のwidthが明示的に指定されていないと、Rechartsの再計算ができないみたい。

解決策

ResponsiveContainerの親要素にwidth:0;を追加する。
※上記のgif画像参考

//Material-ui使用
<Container maxWidth="lg" sx={{ mt: 6, display: 'flex' }}>
  <Box>
    <Formula />
  </Box>
  <Box sx={{ flexGrow: 1, ml: 6 ,width:0}}>{/*widthを追加 */}
    <Chart />
  </Box>
</Container>

なお、issueを解決する上で紹介されていたstackoverflowは下記。
https://stackoverflow.com/questions/7985021/css-flexbox-issue-why-is-the-width-of-my-flexchildren-affected-by-their-content