Flex容器中如何让Div在空间不足时收缩并启用滚动？

问题场景 #

使用Tailwind构建的Flex容器包含两个子Div：

• 第一个Div承载长文本，设置overflow-y-auto，期望占据第二个Div剩余的全部空间
• 第二个Div为固定高度的信息栏

窗口缩小时，第一个Div仅在窗口底部触及其边框后才开始收缩滚动，无法在空间不足时及时触发滚动。尝试过flex-shrink、flex-grow等属性均未解决，需实现空间不足时自动收缩滚动，同时理解h-full失效的原因。

组件代码（HometaskInfo） #

<div className="wrapper w-full h-full flex flex-col justify-between my-7">
     {/*first*/}
     <div className="w-full h-full min-h-0 outline-dotted outline-green-300 outline-2 p-7 bg-black overflow-y-auto whitespace-break-spaces text-nowrap">
         {data.text}
     </div>
    {/*second*/}
    <div
        className="w-full h-16 mt-5 outline-dotted outline-green-300 outline-2 p-3 bg-black flex justify-between items-center">
        <span className="text-lg font-bold">From: <span className="bg-gray-900 p-1">01/01/2024</span></span>
        <span className="text-lg font-bold">Due: <span className="bg-gray-900 p-1">05/02/2024</span></span>
     </div>
</div>

父组件代码 #

<main className="flex flex-col w-full h-full">
    <div className="flex justify-between align-middle items-center h-header w-full border-b border-gray-500">
        <span className="font-bold text-2xl">Display</span>
        <CreateEditModalCallerButton buttonClassName="flex items-center justify-center p-2 hover:bg-opacity-15 hover:bg-black" mode="CREATE">
            <Image className="mr-2 w-6 h-6" src="/assets/plus-solid.svg" alt="pic" width="16" height="16"/>
            <span className="min-md:text-sm max-md:text-base">Add</span>
        </CreateEditModalCallerButton>
    </div>
    <div className="grid grid-rows-1 grid-cols-2 w-full h-full divide-x-2 divide-gray-600 px-7">
        <div className="flex flex-col w-full h-full max-sm:col-span-2 pr-7">
            <HometaskList initialData={initialHometasks}/>
        </div>
        <div className="flex flex-col w-full h-full pl-7 max-sm:hidden">
            {/*Problem is located here*/}
            <HometaskInfo/>
        </div>
    </div>
</main>

根布局代码 #

<html lang="en">
  <body className={`${font.className} w-screen h-screen flex max-md:flex-col`}>
    <StoreProvider>
      <Nav />
      <div className="root_content w-full h-screen">
        {children}
      </div>
    </StoreProvider>
  </body>
</html>

解决方案 #

修改HometaskInfo组件的类名配置，核心调整两个地方：

<div className="wrapper w-full h-full flex flex-col my-7">
     {/*first*/}
     <div className="flex-1 min-h-0 outline-dotted outline-green-300 outline-2 p-7 bg-black overflow-y-auto whitespace-break-spaces text-nowrap">
         {data.text}
     </div>
    {/*second*/}
    <div
        className="w-full h-16 mt-5 outline-dotted outline-green-300 outline-2 p-3 bg-black flex justify-between items-center">
        <span className="text-lg font-bold">From: <span className="bg-gray-900 p-1">01/01/2024</span></span>
        <span className="text-lg font-bold">Due: <span className="bg-gray-900 p-1">05/02/2024</span></span>
     </div>
</div>

关键修改点 #

• 移除外层容器的justify-between：该属性会强制子元素向容器两端分散，导致第一个Div被过度拉伸，无法主动收缩
• 将第一个Div的h-full替换为flex-1：让元素自动占据Flex容器内的剩余空间，而非固定继承父元素高度，实现动态适配
• 保留min-h-0：覆盖Flex子元素默认的min-height: auto，允许元素收缩到内容高度以下，触发滚动

原因解析 #

1. h-full的局限性：
   h-full是让元素继承父元素的计算高度，但在Flex容器中，父元素的高度是动态的，h-full会让元素尝试保持与父元素相同的高度，而非适应剩余空间。当容器空间不足时，元素不会主动收缩，直到父容器被挤压到极限才会触发滚动。

2. justify-between的干扰：
   这个属性会让Flex容器内的子元素尽可能拉开间距，第一个Div会被强制拉伸到最大可能高度，即使空间不足也不会主动收缩，直到整个容器触底。

3. min-h-0的必要性：
   Flex子元素默认有min-height: auto的规则，这会让元素至少保持内容的高度，无法收缩到内容高度以下。min-h-0可以取消这个限制，允许元素在空间不足时收缩，从而触发overflow-y-auto的滚动行为。

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