css - 将滚动应用到 flex 容器的特定部分
问题描述
<div class="flex flex-grow h-full w-100">
<div class="flex flex-col bg-white w-1/5">
<div class="dates px-4">
<p>Today</p>
<p>Tomorrow</p>
<p>Upcoming</p>
</div>
<hr />
<div class="projects flex-grow px-4">
<p>Project 1</p>
<p>Project 2</p>
</div>
<div class="footer">
<hr />
<button class="outline-none py-2 border-gray-400 text-red-400 w-full">
Add project
</button>
</div>
</div>
<div class="main bg-gray-100 flex-grow">Hello</div>
<div class="bg-white w-1/5">Hello</div>
</div>
在上面的代码中,我只希望带有类的 divprojects
可以滚动,同时将dates
和footer
固定在它们的位置上。如何使用 tailwind.css 做到这一点?!我还希望具有类的 divmain
可以垂直滚动,同时将其他两个 div 固定在它们的位置而不滚动。
解决方案
这听起来有点像overflow-y的常见用法。
例如,您可以将此CSS
规则添加到项目的类中:
.projects {
overflow-y: scroll;
}
您可以将此规则添加到您希望可滚动的任何容器中 - 在这种情况下是垂直的。
另一方面,overflow-x: scroll用于水平滚动,或者overflow:scroll用于两者(简写)。
推荐阅读
- java - 如何使用 for 循环在数组中运行一行
- javascript - 对象中的字符串插值
- node.js - 为什么 fs.rmdir 递归选项是实验性的?
- chisel - 如何在 UInt Vec , Chisel 中获取 Max 元素的索引
- excel - 如何停止 excel 认为此列是公式
- for-loop - 满足条件后for循环再次运行
- json - aws sagemaker 端点的输入 json 字符串是否有限制?
- sql - Postgres:如何从日期中提取年份和月份?
- leaflet - 如何在 Leafletjs 地图上获得最佳性能?我应该使用 256 像素还是 64 像素的瓷砖,有什么区别?
- java - 转换 html 行时 JSOUP 缺少标记