React+Tailwind布局问题：如何让div保持固定高度垂直排列

问题核心是Flex布局默认会让子项自动收缩以适应父容器高度，再加上你给父容器设置了justify-center，进一步挤压了子项的高度空间。要维持每个子项的固定高度（比如屏幕高度的1/2），可以按以下两种方式修改：

方法1：禁止子项收缩并允许父容器滚动 #

给每个子div添加flex-shrink-0类，阻止Flex布局压缩子项；同时去掉父容器的justify-center（否则超出父容器的内容会被截断），添加overflow-y-auto让超出部分可以滚动：

import React from 'react';

function YourComponent() {
    return (
        <div className='flex flex-col items-center bg-white border border-black h-screen overflow-y-auto'>
            <div className="w-full h-1/2 border flex-shrink-0">
                Div 1
            </div>
            <div className="w-full h-1/2 border flex-shrink-0">
                Div 2
            </div>
            <div className="w-full h-1/2 border flex-shrink-0">
                Div 3
            </div>
            <div className="w-full h-1/2 border flex-shrink-0">
                Div 4
            </div>
            <div className="w-full h-1/2 border flex-shrink-0">
                Div 5
            </div>
        </div>
    );
}

export default YourComponent;

方法2：改用Block布局（更简洁） #

如果仅需垂直排列子项，直接用默认的块级布局即可，不需要Flex：父容器设置h-screen overflow-y-auto，子项保持h-1/2的高度设置：

import React from 'react';

function YourComponent() {
    return (
        <div className='bg-white border border-black h-screen overflow-y-auto'>
            <div className="w-full h-1/2 border">
                Div 1
            </div>
            <div className="w-full h-1/2 border">
                Div 2
            </div>
            <div className="w-full h-1/2 border">
                Div 3
            </div>
            <div className="w-full h-1/2 border">
                Div 4
            </div>
            <div className="w-full h-1/2 border">
                Div 5
            </div>
        </div>
    );
}

export default YourComponent;

关键细节说明 #

• flex-shrink-0：强制子项保持设定高度，不被Flex布局压缩
• overflow-y-auto：当子项总高度超过父容器时，自动显示垂直滚动条，避免内容溢出截断
• 移除justify-center：Flex的垂直居中会让子项在父容器内居中对齐，导致超出部分被隐藏，无法正常滚动

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