Recharts 100% width is not working in Nextjs / Reactjs. It is not occupying the entire width and also act like a block

Question

I am using Recharts with Next.js and Tailwindcss, I copied a barchart code snippet in Recharts to create my own barchart too. I have to change the height to aspect for it to work. But the width 100% is not working at all. The barchart remain like a block and ocuppy only few width. Pls what am I suppose to do for me to make the barchart cover the 100% width of div?

Here is my code snippet.

const MyChart = () => {
  return (
    <div className="flex shadow-md p-4 w-full pb-0 relative text-xs m-4">
      <ResponsiveContainer width="100%" aspect={2}>
        <AreaChart
          width={500}
          height={400}
          data={data}
          margin={{
            top: 0,
            right: 0,
            left: 0,
            bottom: 0,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Area type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" />
          <Area type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
          <Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
};

Answer 1

The default display of div element is

block

And block elements occupy 100% width of parent element. In this case you change display of div from block to flex so div element just occupy the width of its content so <ResponsiveContainer occupy 100%of width of this div