#AppShell.Main height issue

2 messages · Page 1 of 1 (latest)

glossy basin
#

For some reason I have trouble wrapping by head around this:

My AppShell.Main:

<AppShell.Main className="h-[calc(100vh-var(--app-shell-header-height))]">
  {children}
</AppShell.Main>

<div className="flex h-full">
  <div className="h-full bg-green-200">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
      dolores hic praesentium quibusdam quis? Blanditiis, doloremque earum
      et itaque mollitia omnis pariatur quam quia quisquam sed sint
      tempora tempore ullam.
    </div>
    ...
  </div>
  <div className="h-full border-l bg-yellow-200 p-5">Sidebar</div>;
</div>

As the content overflows the background colors stop showing (see screenshots). This probably has something to do with the vh but I am not sure how to resolve this. Anyone else encountered this before?

image.png
#

When I hover over the main element you can also see it end at the overflow:

image.png