单独的滚动条
Individual Scroll Bars
目前，我有一个向左浮动的导航元素和一个向右浮动的 div。我如何让他们每个人都有一个独立的滚动条，即他们不同步滚动？我试过向两者添加 overflow-y: auto 但没有成功。仅供参考，我正在使用 Tailwind CSS。
这是一个使用 flex
的简单示例
float 和 overflow 的复杂交互有据可查，经常用作浮动布局的 clearfix。
由于您使用的是 Tailwind，因此您绝对应该为您所描述的内容利用他们的 flexbox 或网格模板样式。
顺风示例：
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="w-screen h-screen flex flex-row">
<nav class="bg-gray-600 w-1/4 flex-none p-4 overflow-y-scroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</nav>
<div class="bg-green-600 w-3/4 flex-none p-4 overflow-y-scroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</div>
</div>
普通 CSS 示例：
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
}
nav {
background-color: gray;
overflow-y: scroll;
flex-basis: 25%;
padding: 1rem;
}
#right {
background-color: green;
overflow-y: scroll;
flex-basis: 75%;
padding: 1rem;
}
<div class="container">
<nav>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</nav>
<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</div>
</div>
我喜欢用 flex 来做到这一点。关键是在 flex parent 上设置 min-h-0。否则，它将随着 children 一起增长，然后整个 body 将开始滚动。在此示例中，如果需要，它还会在 x-axis 上有单独的滚动条。
注意p标签上的内联样式只是给侧边栏和主要区域一些大的内容。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex h-screen w-screen min-h-0 min-w-0">
<aside class="h-full w-64 bg-teal-900 text-white border-r overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</aside>
<main class="h-full flex-1 overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</main>
</div>
当您想在顶部或下方放置导航栏和页脚等内容时，这会变得更具挑战性。这是您真正需要最小高度的地方。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex flex-col h-screen w-screen min-h-0 min-w-0">
<nav class="p-1 border-b bg-gray-200">navbar</nav>
<section class="flex flex-1 min-h-0 min-w-0">
<aside class="h-full w-64 bg-teal-900 border-r overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</aside>
<main class="flex-1 h-full overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</main>
</section>
</div>
目前，我有一个向左浮动的导航元素和一个向右浮动的 div。我如何让他们每个人都有一个独立的滚动条，即他们不同步滚动？我试过向两者添加 overflow-y: auto 但没有成功。仅供参考，我正在使用 Tailwind CSS。
这是一个使用 flex
float 和 overflow 的复杂交互有据可查，经常用作浮动布局的 clearfix。
由于您使用的是 Tailwind，因此您绝对应该为您所描述的内容利用他们的 flexbox 或网格模板样式。
顺风示例：
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="w-screen h-screen flex flex-row">
<nav class="bg-gray-600 w-1/4 flex-none p-4 overflow-y-scroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</nav>
<div class="bg-green-600 w-3/4 flex-none p-4 overflow-y-scroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</div>
</div>
普通 CSS 示例：
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
}
nav {
background-color: gray;
overflow-y: scroll;
flex-basis: 25%;
padding: 1rem;
}
#right {
background-color: green;
overflow-y: scroll;
flex-basis: 75%;
padding: 1rem;
}
<div class="container">
<nav>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</nav>
<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</div>
</div>
我喜欢用 flex 来做到这一点。关键是在 flex parent 上设置 min-h-0。否则，它将随着 children 一起增长，然后整个 body 将开始滚动。在此示例中，如果需要，它还会在 x-axis 上有单独的滚动条。
注意p标签上的内联样式只是给侧边栏和主要区域一些大的内容。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex h-screen w-screen min-h-0 min-w-0">
<aside class="h-full w-64 bg-teal-900 text-white border-r overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</aside>
<main class="h-full flex-1 overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</main>
</div>
当您想在顶部或下方放置导航栏和页脚等内容时，这会变得更具挑战性。这是您真正需要最小高度的地方。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex flex-col h-screen w-screen min-h-0 min-w-0">
<nav class="p-1 border-b bg-gray-200">navbar</nav>
<section class="flex flex-1 min-h-0 min-w-0">
<aside class="h-full w-64 bg-teal-900 border-r overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</aside>
<main class="flex-1 h-full overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</main>
</section>
</div>