如何让Tailwind样式的React组件仅单个子元素实现overflow滚动？

问题核心是要将可滚动文本区域和固定底部按钮分离，通过Flex布局实现区域划分，避免按钮随文本滚动。

修改后的组件代码如下：

import Image from 'next/image';
import cn from 'classnames';
import { useState } from 'react';
import { ImageInfo } from '../../types/images';
import Button from './button';
import { useRouter } from 'next/router';

type BlurImageProps = {
    image: ImageInfo;
};

const BlurImage = ({ image }: BlurImageProps): JSX.Element => {
    const [isLoading, setLoading] = useState(true);

    return (
        <div className="group shrink-0 h-40 w-40 relative aspect-w-1 aspect-h-1 overflow-hidden rounded-lg xl:aspect-w-7 xl:aspect-h-8 drop-shadow-xl bg-black">
            <Image
                alt=""
                src={image.url}
                width={512}
                height={512}
                className={cn(
                    'flex h-full duration-700 ease-in-out group-hover:opacity-20',
                    {
                        'scale-110 blur-2xl grayscale': isLoading,
                        'scale-100 blur-0 grayscale-0': !isLoading,
                    },
                )}
                onLoadingComplete={() => setLoading(false)}
            />
            {!isLoading && (
                {/* 关键改动：改为flex垂直布局，划分滚动区和固定区 */}
                <div className="absolute inset-0 flex flex-col items-center text-center px-2 opacity-0 duration-700 ease-in-out group-hover:opacity-100">
                    {/* 文本滚动区域：flex-1占满剩余空间，overflow-y-auto实现滚动 */}
                    <div className="flex-1 w-full overflow-y-auto">
                        <a href={image.url}>
                            <p className="text-base text-white mb-2">
                                {image.prompt}
                            </p>
                        </a>
                    </div>
                    {/* 固定按钮：mt-auto推到底部，flex-shrink-0防止被压缩 */}
                    <Button
                        className="flex-shrink-0 px-2 py-2 text-sm font-bold text-white rounded bg-green-500 mb-2"
                        type="button"
                        text="click me"
                        isSubmit={true}
                        onClick={() => console.log("clicked")}
                    />
                </div>
            )}
        </div>
    );
};

export default BlurImage;

关键改动说明 #

1. 容器布局调整：将hover时的绝对定位容器改为flex flex-col，让内部元素垂直排列，为区域划分提供基础。
2. 文本滚动区设置：把文本包裹在flex-1 overflow-y-auto的容器中，flex-1会自动填充除按钮外的所有可用空间，overflow-y-auto确保文本过长时仅该区域滚动。
3. 按钮固定处理：给按钮添加mt-auto，利用Flex布局的自动margin特性将按钮推至容器底部，同时flex-shrink-0防止按钮被压缩变形，保证其始终显示在底部不随文本滚动。

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