在一个布局之中（如下所示），顶部固定定位，左侧侧栏固定定位，其中的菜单超出屏幕后独享一个滚动条。
****************************************************************************
* Header *
*--------------------------------------------------------------------------*
* | *
* | *
* aside | *
* | | *
* 导航菜单 | 内容 *
* | *
* | *
* | *
* | *
****************************************************************************
然后，出现这样一个问题，代码如下：
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<style>
body { margin: 0;}
header { width: 100%; height: 64px; position: sticky; top: 0; background-color: thistle;}
.main-wrapper {display: flex; height: 5000px;}
.main-wrapper aside {width: 280px; height: 100vh; overflow-y: auto; position: fixed; left: 0;}
.main-wrapper main {margin-left: 280px; width: 100%;}
</style>
</head>
<body>
<header></header>
<div class="main-wrapper">
<aside>
<nav><ol id="menu-group"></ol></nav>
</aside>
<main> ... </main>
</div>
<script>
const m = document.getElementById("menu-group");
let liList = "";
for (let i = 0; i < 50; i++) {
liList += "<li></li>";
}
m.innerHTML = liList;
</script>
</body>
</html>
虽然看起来实现了效果，但是左侧导航栏却出现了信息显示不全（上述代码通过js产生了50个列表，但实际页面拖动滚动条到最下方也没有显示全）。
如何解决呢？最好的方式就是上网查看别人的布局代码，最终发现有这么个地方，就是侧栏滚动条在padding的下方，而不是元素的顶部，点击查看对其的实现 - 滚动条的位置。
核心代码:
#root{
display: flex;
overflow-y: auto;
}
#root .nav{
overflow-x: hidden;
}
一个完整的布局的例子：Layout，删除url中的edit全屏浏览
