Why does flex-box div not respect parent height?

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

Related Post