Flex子项导航栏滚动条显示与功能实现问题

当前导航栏初始尺寸较小，但后续会大幅扩展，需要添加滚动条。尝试使用overflow: scroll强制显示滚动条但无效，试过给各类元素加overflow: hidden、clip、nowrap等属性，也给父元素设置overflow: scroll，都没解决问题。DOM由Blazor应用生成，已添加边框确认元素占满视口。

核心解决方案 #

滚动条正常显示的关键是为导航栏的nav元素设置固定高度，结合overflow: auto实现内容超出时滚动。查看CSS中标记/* magic happens here */的部分：

body {
  padding: 0;
  margin: 0;
  font: bold 16px Garamond, serif;
  background: black;
  color: white;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.view {
  flex: 1 1 100%;
  border: solid 1px red;
}

.navbar {
  flex: 0 0;
  border: solid 1px yellow;
  align-content: start;
}
nav {
  white-space: nowrap;
  padding: 0;
  color: grey;
/* magic happens here */
  height: 100%;
  overflow: auto;
/* magic happens here */
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: auto;
}

对应的HTML结构：

<html lang="en">
  <head>
  </head>
  <body>
<div class="wrapper">
  <div class="navbar">
    <nav >
      <ul >
        <li >Home Sweet Home</li>
        <li >Adventure Log</li>
        <li >Rules</li>
        <li >Maps</li>
        <li >Characters</li>
      </ul>
    </nav>
  </div>
  <div class="view">
    <div>Hello, world!</div>
    <div>Welcome to your new app.</div>
  </div>
</div>
  </body>
</html>

原理：height:100%让nav元素继承父容器的高度，当内部ul的内容超出这个高度时，overflow: auto会自动显示滚动条，实现导航内容的滚动效果。

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