What is the current behavior?

When width and height are not explicitly set on ResponsiveContainer, although there aren't any issues with rendering of the component, it logs the following message:

The width(-1) and height(-1) of chart should be greater than 0,
       please check the style of container, or the props width(100%) and height(100%),
       or add a minWidth(0) or minHeight(undefined) or use aspect(undefined) to control the
       height and width.

Minimal example of code to get this log:

function Demo() {
  return (
    <div style={{ width: "100%", height: 300 }}>
      <ResponsiveContainer height="100%" width="100%">
        <AreaChart data={data}>
          <XAxis dataKey="name" />
          <YAxis />
          <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

What is the expected behavior?

Do not log warning when ResponsiveContainer inherits its size from the parent.

Please provide a demo of the problem in a sandbox

https://codesandbox.io/p/devbox/mantine-react-template-forked-wqmrq4

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Recharts version with the issue – 3.5.1

It works correctly with the latest 2.x version.