This seems really straight forward and I guess I must be missing something quite obvious, but why does the flex div here not respect the 300px set by its parent?
<div className="max-h-[300px] h-[300px] bg-cyan-200 w-full">
<div className="flex flex-1 flex-col overflow-y-scroll space-y-4 h-full">
<div className="h-[75px] w-full bg-lime-400"></div>
<div className="h-[75px] w-full bg-amber-400"></div>
<div className="h-[75px] w-full bg-lime-400"></div>
<div className="h-[75px] w-full bg-amber-400"></div>
<div className="h-[75px] w-full bg-lime-400"></div>
<div className="h-[75px] w-full bg-amber-400"></div>
</div>
</div>
As you can see in this image all 75px height DIVs are visible. What am I missing here to make the flex
div not overflow its container?
You need to sign in to view this answers
Leave feedback about this