Tailwind 中如何让 flex 布局的子元素高度撑满父容器？

FSD-雨路提问于 2026-03-13 18:06:22 阅读 3

框架

我在用 Tailwind 写一个侧边栏布局，父容器用了 flex，但里面的子元素高度总是不够，没法自动撑满。明明父容器有固定高度，加了 h-full 也不起作用，是不是还要配合其他类？

我的结构大概是这样：

<div class="flex h-screen">
  <div class="w-64 bg-gray-800 h-full">Sidebar</div>
  <div class="flex-1 bg-gray-100">Main content</div>
</div>

但左侧的 sidebar 看起来没填满整个屏幕高度，底部留了一截空白，这是为啥？

Grid布局 UI框架

我来解答赞 0 收藏

反馈

1 条解答

西门丹丹 Lv1

这个问题很常见，核心在于 flex 布局的拉伸机制。

其实在 flex 布局里，子元素默认就是被拉伸的（align-items: stretch），所以 h-full 根本不需要，反而可能帮倒忙。flex 子项的百分比高度是相对于 flex 行的行高来计算的，不是父容器高度。

直接去掉 sidebar 上的 h-full 就行：

<div class="flex h-screen">

  <div class="w-64 bg-gray-800">Sidebar</div>

  <div class="flex-1 bg-gray-100">Main content</div>

</div>

如果你确实想显式控制，可以在 sidebar 上加 self-stretch（对应 align-self: stretch），跟默认行为是一样的，但能覆盖掉可能存在的其他 align-self 设置：

<div class="w-64 bg-gray-800 self-stretch">Sidebar</div>

还有一种情况会导致不生效，就是 sidebar 内部有设置了具体高度的子元素，或者用了 grid 布局之类的把高度锁死了，这种时候得检查内部元素的样式。

总之记住：flex 布局下让子元素撑满父容器高度，直接删掉 h-full 就行，别给自己加戏。

2026-03-13 18:08