如何让overflow-y-auto在子元素超限时触发？当前配置未生效

问题根源 #

你给内层两个div分别设置了h-[40%]和h-[60%]，两者高度总和刚好等于外层容器的h-full，导致无论添加多少<article>，只会让第二个子div内部触发滚动，外层容器永远不会出现内容溢出。

解决办法 #

方案1：移除第二个子div的固定高度

保留第一个子div的h-[40%]（如需固定比例），去掉第二个子div的h-[60%]，让它根据<article>数量自适应高度。当<article>增多时，第二个子div高度会超过原60%占比，整体内容总高度超过外层h-full，外层的overflow-y-auto就会生效。

修改后代码：

<div className="overflow-y-auto h-full w-full">
    <div className="w-full h-[40%]">
        <p>something</p>
    </div>
    <div className="w-full">
        <article>some stuff</article>
        <article>some stuff</article>
        <article>some stuff</article>
        <!-- 添加更多article -->
    </div>
</div>

方案2：用Flex布局优化高度控制

给外层容器添加flex flex-col，第一个子div设置flex-shrink-0（避免被压缩）和固定高度/比例，第二个子div不设固定高度，随内容自然扩展。这种方式更灵活，同样能让整体内容超过外层高度时触发滚动。

修改后代码：

<div className="overflow-y-auto h-full w-full flex flex-col">
    <div className="w-full h-[40%] flex-shrink-0">
        <p>something</p>
    </div>
    <div className="w-full">
        <article>some stuff</article>
        <article>some stuff</article>
        <!-- 添加更多article -->
    </div>
</div>

补充：若需顶部区域固定、仅下方内容滚动

如果你实际需求是让顶部区域保持可见，只有<article>区域滚动，那应该把overflow-y-auto加到第二个子div上，外层无需设置滚动：

<div className="h-full w-full">
    <div className="w-full h-[40%]">
        <p>something</p>
    </div>
    <div className="w-full h-[60%] overflow-y-auto">
        <article>some stuff</article>
        <!-- 添加更多article -->
    </div>
</div>

内容的提问来源于stack exchange，提问作者me-an-ape