解决Flex布局中侧边栏内容挤压底部Footer的问题

问题核心在于当前布局中，内容容器使用h-fit会随内容高度撑开，挤占Footer的空间。通过调整Flex布局的空间分配和溢出属性，可以实现Footer固定在侧边栏底部，同时收藏夹内容过多时自动滚动。

修改后的侧边栏代码： #

<div className="w-fit h-full bg-gray-800 rounded-xl text-gray-100 p-4 flex flex-col">
  <h1 className="text-2xl">Sidebar</h1>
  {/* 用flex-1替代h-full，占据标题以外的剩余空间 */}
  <div className="w-full flex-1 bg-red-400 flex flex-col justify-between">
    {/* 内容容器设为flex-1 overflow-hidden，限制在父容器空间内 */}
    <div className="w-full flex-1 px-2 flex flex-col gap-y-4 overflow-hidden">
      <div className="bg-gray-500">menu item 1</div>
      <div className="bg-gray-500">menu item 2</div>
      <div className="bg-gray-500">menu item 3</div>
      <div className="bg-gray-500">menu item 4</div>
      <div className="bg-gray-500">menu item 5</div>
      <div className="bg-gray-500">menu item 6</div>
      <hr />
      {/* 收藏夹区域设置overflow-y-auto，内容过多时滚动 */}
      <div className="w-full flex flex-col bg-orange-800 gap-y-6 overflow-y-auto flex-1">
        <div className="text-lg py-4">Favorite 1</div>
        <div className="text-lg py-4">Favorite 2</div>
        <div className="text-lg py-4">Favorite 3</div>
        <div className="text-lg py-4">Favorite 4</div>
        <div className="text-lg py-4">Favorite 5</div>
        <div className="text-lg py-4">Favorite 6</div>
        <div className="text-lg py-4">Favorite 7</div>
      </div>
    </div>
    <div className="w-full h-fit text-center text-blue-700 bg-purple-400 font-bold">
      Footer
    </div>
  </div>
</div>

关键修改说明： #

1. 中间容器使用flex-1：外层侧边栏是flex-col h-full，给中间容器添加flex-1后，它会自动占据标题下方的所有剩余空间，Footer因此能固定在侧边栏底部。
2. 内容容器添加flex-1 overflow-hidden：限制内容区域只能在中间容器的空间内，避免内容撑开导致Footer位移。
3. 收藏夹区域设置overflow-y-auto：当收藏夹内容超过容器高度时，自动显示垂直滚动条，同时保留其他内容的正常显示。

这样调整后，无论收藏夹有多少内容，Footer都会固定在侧边栏底部，且收藏夹内容可滚动查看。

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