TailwindCSS height classes not respected by ResponsiveContainer

[bigmooon]

🐞 Bug: ResponsiveContainer does not recognize height when only Tailwind class is used

Summary

When using ResponsiveContainer with width="100%" and height="100%" inside a div styled with TailwindCSS height classes (e.g., h-40), the chart does not render at all unless a fixed inline style (e.g., style={{ height: "160px" }}) is applied instead.

This seems to be a long-standing issue referenced in this open issue, but still reproducible with current versions.

---

✅ Reproduction Code

<div className="w-full h-40 relative">
  <ResponsiveContainer width="100%" height="100%">
    <PieChart>
      <Pie
        data={data}
        dataKey="value"
        innerRadius={30}
        outerRadius={50}
      >
        {data.map((entry, index) => (
          <Cell key={index} fill={entry.color} />
        ))}
      </Pie>
    </PieChart>
  </ResponsiveContainer>
</div>