PageLayout doesn't extend the sidebar divider when extending the height.

[maximedegreve]

Description

On GitHub, I've seen some pages using the PageLayout component, but there's a problem: when you can't scroll, the PageLayout doesn't stretch to fill the whole page, which means the divider ends up getting cut off halfway down the page. To fix this, I tried making the PageLayout fill up all the available space from its parent in a few instances, but this didn't solve the issue – the divider still gets cut off.

💬 Related internal conversation

Steps to reproduce

Check my CodeSandbox

Version

Latest

Browser

Safari

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[CleverLemming1337]

I could fix your issue by adding height: '100vh' in line 46 of your code.

[dwsosa]

The PageLayout component is not opinionated about layout and was underspecified in the CodePen. By adjusting the following props, it will fill its parent, and the divider will extend as expected:

<PageLayout
  sx={{
    bg: 'green',
    flex: 1, // Fills available space in the parent
    display: 'flex', // Makes PageLayout a flex container
    flexDirection: 'row', // Aligns children horizontally
  }}
/>

Looks like this was a layout misunderstanding rather than a bug. I’d suggest closing the issue.

[dwsosa]

I have a PR with this as the default behavior if that approach is preferred.

[hectahertz]

@maximedegreve Would you be ok if we just updated the documentation of the component? I believe this would be the best approach here