如何将多子元素高度设为动态高度父容器高度？CSS可行吗？

不需要JavaScript，纯Tailwind CSS就能解决。核心思路是利用Flex布局的高度拉伸特性和overflow滚动，步骤如下：

1. 给包裹???的左侧容器添加h-full overflow-y-auto：

   • h-full让左侧容器高度自动匹配带ref的父容器（因为父容器是Flex布局，子元素默认拉伸高度）
   • overflow-y-auto保证子元素过多时可以垂直滚动

2. 给每个???子元素添加h-full：

   • 让每个子元素高度继承左侧容器的高度，也就是带ref的父容器高度

修改后的代码如下：

<div className="h-[632px] flex flex-col">
  <div className="h-32">
    {/* Some content */}
  </div>
  <div
    className="relative flex flex-1 justify-between space-x-10 overflow-y-auto"
    ref={ref}
  >
    <div className="flex flex-col items-start h-full overflow-y-auto">
      <div className="h-full" />
      <div className="h-full" />
      <div className="h-full" />
    </div>
    <div className="sticky top-0 flex h-full w-96 items-center justify-center">
      {/* Some content */}
    </div>
  </div>
</div>

方案说明 #

• 带ref的容器是flex-1，会自动占据父容器的剩余高度（即使顶部h-32容器改成动态高度，这个剩余高度计算依然有效，无需手动计算）
• Flex布局的子元素默认align-items: stretch，所以左侧容器会被拉伸到和带ref的父容器同高
• 左侧容器设置overflow-y-auto后，内部子元素可以超出容器高度并滚动，每个子元素的h-full会匹配左侧容器的高度，也就是带ref的父容器高度

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