如何无需重复使用`flex flex-col flex-1 overflow-hidden`实现嵌套元素的滚动？

嘿，我太懂这种深层嵌套元素滚动的糟心了！之前我也在Tailwind里踩过这个坑——明明想让某个小容器滚动，结果整个页面都被超长内容撑爆，滚动条跑到最外层去了。你遇到的问题其实很典型：深层嵌套的大内容会顺着DOM树往上“撑开”所有父元素，直到找到一个没有限制溢出的容器（通常就是整个页面），所以才会出现整个页面滚动的情况。

要解决这个问题，核心其实就两点，不用每层都套flex flex-col flex-1 overflow-hidden，只需要在关键节点做限制就行：

1. 给要滚动的容器设置「确定的高度」+「overflow-y-auto」（垂直滚动）
2. 确保滚动容器的**直接父级（及往上的关键父元素）**不会被内容撑开，也就是给这些父元素设置「确定的高度」或者「overflow-hidden」，让浏览器知道“滚动就限制在这个容器里，别往上找了”

针对你的代码，我们可以这样修改，完美实现局部滚动：

<div class="h-full flex flex-col">
    <div> <p> Some text </p> </div>
    <div> <button> Click me </button> </div>
    <form class="flex-1 overflow-hidden">
        <input>
        <div>text</div>
        <div>text</div>
        <div class="h-full flex flex-col">
            <div> more text </div>
            <div class="flex-1 overflow-y-auto"> <!-- 这就是要滚动的容器 -->
                <div class="h-[2000px]"> Alot of content overflowing the screen! </div>
            </div>
        </div>
    </form>
</div>

我给你拆解下每一步的作用：

• 最外层的h-full flex flex-col：把整个布局的高度锁死在父级高度（比如视口高度），同时让内部元素垂直排列，这样后面的form可以用flex-1占满剩余空间
• form上的flex-1 overflow-hidden：让form占满最外层除了文本、按钮之外的所有高度，同时overflow-hidden告诉浏览器“form内部的内容别撑开我，超出的部分直接隐藏”，这样就把溢出限制在form内部了
• form里最后一个div的flex flex-col：让里面的“more text”和滚动容器垂直排列，滚动容器用flex-1占满这个div的剩余高度
• 滚动容器的flex-1 overflow-y-auto：flex-1给它一个确定的高度（基于父级的剩余空间），overflow-y-auto让内容超出时自动显示垂直滚动条，完美把滚动限制在这个小容器里

这样一改，你那个2000px高的超长内容就只会在指定的小容器里滚动，再也不会撑爆整个页面啦！

备注：内容来源于stack exchange，提问作者ólavur Nón