为何根元素设置overflow:hidden后，子元素文本仍会溢出？

还原你的代码场景 #

根容器CSS：

height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 2.5rem;
background: red;

子容器CSS：

flex: 1;
background: blue;

对应Tailwind代码：

<div className="bg-red-200 h-full flex flex-col p-10 overflow-hidden">
    <div className="bg-blue-200 flex-1">
    </div>
</div>

当添加大字号<p>标签后，文本溢出到根容器外部却未被隐藏，核心原因和flex布局的**min-height默认规则**有关。

具体原因拆解 #

1. 根容器overflow:hidden的生效逻辑：它只会裁剪自身边界范围内超出的内容。只有当元素处于根容器内部，但内容突破根容器边界时，才会被隐藏。
2. flex子容器的“撑开”特性：在flex-direction: column布局中，flex子元素的默认min-height值为auto——这意味着如果子容器内部内容高度超过根容器分配的空间，子容器会被内容强行撑开，直接突破根容器的空间限制，跑到根容器边界之外。
3. 溢出文本的归属：此时<p>标签的文本溢出是相对于被撑开的子容器，而非根容器。子容器本身已经超出根容器范围，它的内容自然不在根容器的裁剪范围内，所以根容器的overflow:hidden对这部分溢出文本完全无效。

解决办法 #

给flex子容器加上min-height: 0（Tailwind中对应min-h-0），让它遵守根容器分配的空间限制，同时给子容器设置overflow:hidden，这样内部内容溢出时就会被子容器裁剪：

修改后的Tailwind代码：

<div className="bg-red-200 h-screen flex flex-col p-10 overflow-hidden">
    <div className="bg-blue-200 flex-1 min-h-0 overflow-hidden">
        <p className="text-[30px]">这里是过长的测试文本，现在会被正确裁剪...</p>
    </div>
</div>

• min-h-0：强制子容器接受根容器分配的最大高度，不再被内容撑开。
• overflow:hidden：让子容器裁剪自身内部超出的内容。

内容的提问来源于stack exchange，提问作者displayName