<div className="flex h-screen w-screen bg-neutral-900 flex-col"><div className="flex w-1/3 h-full gap-4 p-4 items-center justify-center flex-col text-white bg-neutral-900 "><div className="flex h-full w-full "><div className="flex h-full w-full items-center justify-center"><div className="flex flex-col h-full w-full justify-end "><div className="flex h-full flex-col overflow-scroll "><h Overflowing Content /></div></div></div></div></div></div>;I have a nested layout where the outermost parent has a fixed height (h-screen), and I’m passing this height down to child containers using h-full. However, when a child element has overflowing content, it causes either all? or one? of the parent containers to expand beyond h-screen. I want that the height of the whole things keeps its height of screen.
I’ve ensured that the outermost parent is fixed at h-screen, and the child containers are set up with h-full, yet the layout still breaks.
I have also tried switching to flex grow instead of using h-full...