如何让内容自适应剩余空间，仅在page-container内显示滚动条？

我想要实现一个布局，但找不到合适的CSS属性组合。

我的布局包含以下元素：

• 顶部标题栏始终可见
• 左侧菜单可通过标题栏中的按钮展开/收起
• 菜单右侧、标题栏下方的剩余空间填充对应内容（根据用户点击的菜单项切换）

核心需求：

• 当内容需要更多空间时，仅page-container内部出现滚动条，而非整个页面（标题栏和菜单保持固定）
• 页面内容中的detail-panel div需始终可见在视图底部，让其上方的page-content自动收缩以适配它

目前代码存在的问题：当视图尺寸小于内容时，整个页面（包括标题栏和菜单）会出现滚动，且detail-panel无法保持在视图底部。

现有代码片段 #

HTML #

<div id="parent-container">

    <div id="title-bar">
        <h1 id="menu-toggle">+</h1>
        <h1>The Title</h1>
    </div>

    <div class="top-container">
        <div id="menu">
          <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
            <li>Menu Item 4</li>
            <li>Menu Item 5</li>
          </ul>
        </div>

        <div id="content">
            <div class="page-container">
              The stuff in within page-container could change to anything based on whichever menu item the user selects, so everything "above" this must be fairly generic, and not dependent on the content within.
              </br></br>
      
              <div class="page-content">
                
                  This should show a scrollbar (horizontal and vertical) if required.
                
                </br></br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tellus elementum sagittis vitae et leo duis. Laoreet sit amet cursus sit. Diam vel quam elementum pulvinar etiam non quam lacus suspendisse. Enim eu turpis egestas pretium. Tristique senectus et netus et malesuada fames ac. Proin fermentum leo vel orci porta non pulvinar neque. Faucibus vitae aliquet nec ullamcorper sit. Non consectetur a erat nam at lectus urna duis.

Vestibulum morbi blandit cursus risus at. Aenean et tortor at risus viverra adipiscing at in tellus. Tellus molestie nunc non blandit massa. Urna id volutpat lacus laoreet non curabitur. Sem viverra aliquet eget sit amet tellus cras. Sapien faucibus et molestie ac feugiat sed lectus. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Nibh ipsum consequat nisl vel pretium. Vulputate dignissim suspendisse in est. Bibendum at varius vel pharetra vel turpis nunc eget. A scelerisque purus semper eget duis at tellus at. Venenatis tellus in metus vulputate eu scelerisque felis. Lectus vestibulum mattis ullamcorper velit. Ipsum consequat nisl vel pretium lectus quam id leo. Tempor nec feugiat nisl pretium. Maecenas sed enim ut sem viverra aliquet.

Ornare arcu odio ut sem. Cras adipiscing enim eu turpis egestas pretium aenean pharetra magna. Facilisis gravida neque convallis a cras. Enim diam vulputate ut pharetra sit amet. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet nisl suscipit adipiscing bibendum est ultricies. Risus in hendrerit gravida rutrum. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quam pellentesque nec nam aliquam sem et. Gravida quis blandit turpis cursus.

Et malesuada fames ac turpis egestas. Viverra nibh cras pulvinar mattis nunc. Nulla pellentesque dignissim enim sit amet venenatis urna cursus eget. Viverra vitae congue eu consequat ac. Nibh praesent tristique magna sit amet purus gravida quis blandit. Enim eu turpis egestas pretium aenean pharetra magna ac. Aliquet nec ullamcorper sit amet risus nullam. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Metus dictum at tempor commodo ullamcorper. Magna ac placerat vestibulum lectus mauris. Arcu vitae elementum curabitur vitae nunc sed velit. At augue eget arcu dictum varius duis at consectetur lorem. Velit egestas dui id ornare arcu odio ut. Platea dictumst quisque sagittis purus sit amet. Vel fringilla est ullamcorper eget nulla facilisi etiam. Volutpat maecenas volutpat blandit aliquam etiam. Semper viverra nam libero justo.

Eu consequat ac felis donec. Faucibus vitae aliquet nec ullamcorper. Faucibus turpis in eu mi bibendum neque egestas congue. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Tortor at auctor urna nunc id cursus metus aliquam. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Lacus vel facilisis volutpat est velit egestas dui id. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Cras adipiscing enim eu turpis. Scelerisque varius morbi enim nunc. Pulvinar proin gravida hendrerit lectus. Laoreet sit amet cursus sit amet dictum sit amet justo. Lacinia quis vel eros donec ac odio tempor. Feugiat in ante metus dictum at tempor commodo. Purus in mollis nunc sed id.
              </div>

              <div class="detail-panel">
                  This should always be displayed at the bottom of the view.
              </div>
          </div>
        </div>
    </div>
</div>

CSS #

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 1.5em;
    margin: 0;
    padding: 0;
}

#parent-container {
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#title-bar {
    background-color: blue;
    color: #fff;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
}

#menu-toggle {
    cursor: pointer;
    font-size: 2em;
    user-select: none;
    flex-shrink: 0;
    padding: 10px;
    transform: rotate(45deg);
    transition: transform .3s ease-in;
}

#menu.closed {
    max-width: 0;
    transition: max-width 0.3s ease-out;
    overflow: hidden;
}

#menu-toggle.closed {
    transform: rotate(0);
    transition: transform .3s ease-in;
}

.top-container {
    display: flex;
    flex-grow: 1;
}

#menu {
    background-color: grey;
    max-width: 200px; /* just an arbitrary bigger-than-needed value to allow transition */
    transition: max-width 0.3s ease-in;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
}

#content {
    flex-shrink: 1;
    flex-grow: 1;
}

.page-container {
    display: flex;
    flex-direction: column;
    background-color: pink;
}

.page-content {
    overflow-y: auto;
    overflow-x: auto;
    flex-grow: 1;
    flex-shrink: 1;
}

.detail-panel {
    background: teal;
    flex-shrink: 0;
}

JavaScript #

document.getElementById('menu-toggle').addEventListener('click', function () {
 document.getElementById('menu').classList.toggle('closed');
        
document.getElementById('menu-toggle').classList.toggle('closed');
    });

内容的提问来源于stack exchange，提问作者WSC