在 Tailwind CSS 中，通过移除父容器的固定高度（如 h-screen）并为子元素添加 overflow-auto，可让子元素脱离父级高度约束，根据内容自然撑开，无需预设高度值。
在 tailwind css 中，通过移除父容器的固定高度（如 `h-screen`）并为子元素添加 `overflow-auto`，可让子元素脱离父级高度约束，根据内容自然撑开，无需预设高度值。
当父容器设置了 h-screen（或任何显式高度类），其 Flex 子元素默认会拉伸以填满可用高度，导致内容区被强制截断或撑满——即使你并未主动设置子元素高度。这本质上是 Flex 布局的默认行为：align-items: stretch 使子项在交叉轴（此处为垂直方向）自动拉伸至父容器高度。
要打破这一继承行为，关键在于两点：
- 移除父容器的显式高度限制（如 h-screen），使其高度由内容自然决定；
- 为子元素添加 overflow-auto（或 overflow-y-auto），既允许内容溢出时出现滚动条，又阻止 Flex 的默认拉伸行为——因为一旦设置了 overflow 且不为 visible，该元素在 Flex 容器中将不再默认 stretch，而是按内容高度收缩。
✅ 正确写法示例：
<div class="flex w-full bg-red-400 p-5">
<div class="flex w-40 bg-yellow-400 p-5 overflow-auto">
Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin. The first two words themselves are a truncation of dolorem.
</div>
</div>
⚠️ 注意事项：
- 若希望子元素完全不出现滚动条，且父容器高度仍需保持灵活，可改用 min-h-0 配合 overflow-visible（但需确保父容器无 align-items: stretch 干扰）；更稳妥的方式是显式重置 Flex 行为：self-auto（等价于 align-self: auto），即 ；
- overflow-auto 在内容超出时启用滚动，适合内容长度不可预知的场景；若确定内容不会溢出，仅需防拉伸，overflow-hidden 或 overflow-clip 同样有效；
- 避免在父 Flex 容器上同时使用 h-* 和 flex-col / items-stretch 组合，除非明确需要高度约束。
总结：不设高度 + overflow-* 是解除 Flex 子项高度继承最轻量、语义清晰的方案，兼顾响应性与可维护性。
