Flex-儿童固定位置和100％的身高

Question

固定为100高度（在高度上伸展）的菜单。 如果菜单中的内容越来越超出div的范围，则必须在菜单中显示滚动条。 它的长度不能超过100高度。

页面内容可以增长到任何高度（最小高度也可以延伸到父级的高度）。 如果内容大小在增加，则必须显示默认滚动条（在右侧）

HTML：

<div class="module">
      <nav class="vertical-menu">
        <header>
          <h5>Menu</h5>
        </header>
        <div class="menu-links">
          menu link<br/>
          menu link<br/>
          menu link<br/>
          menu link<br/>
          menu link<br/>
          menu link<br/> 
        </div>
      </nav>
      <div class="page-content">
        Some content<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
        another line<br/>
      </div>
    </div>

CSS：

    .module {
      display: flex;
      width: 100%;
      height: 100%;
      background-color: lightgray;
    }

    .vertical-menu {
      margin: 10px 0;
      width: 300px;
      background-color: coral;
      flex-shrink: 0;
      align-items: stretch;
    }

    .vertical-menu h5 {
      font-size: 23px;
      padding: 10px 22px;
      border-bottom: 2px solid black;
    }

    .page-content {
      margin: 10px;
      background: tomato;
      flex-grow: 1;
    }

Codepen https://codepen.io/Babulaas/pen/ZoPvmO

我希望有人可以帮助我解决这个问题。

Answer 1

干得好！

https://codepen.io/anon/pen/VBEpOR#anon-login

因此，您希望边栏在滚动页面时始终保持可见状态。

您应该将.vertical-menu内容包装到辅助容器.vertical-menu-body并：

• 将其fixed ;

• 赋予它与.vertical-menu相同的宽度

• 启用使用overflow-y: scroll ：

• 使用max-height: 100vh限制其max-height: 100vh 。

完整代码。

CSS：

.module {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: lightgray;
}

.vertical-menu {
  margin: 10px 0;
  width: 300px;
  flex-shrink: 0;
  align-items: stretch;
  overflow: hidden;
  position: relative;
}

.vertical-menu-body {
  position: fixed;
  max-height: 100vh;
  width: 300px;
  background-color: coral;
  overflow-y: scroll;
}

HTML：

<div class="module">
  <nav class="vertical-menu">
    <div class="vertical-menu-body">
      <header>
        <h5>Menu</h5>
      </header>
      <div class="menu-links">
        menu link<br/>
        ...
      </div>
    </div>
  </nav>
  <div class="page-content">
    Some content<br/>
    ...
  </div>
</div>