Here is a simple solution: place a div outside all relative and absolute positioned divs. This div without positions can utilize Grid and allow the normal flow to be followed. However, problems may arise if the div or other component has zero width or height. I previously attempted to use UseRef with good results, but the code became excessively large when implementing additional solutions such as resizing images.

import Image from "next/image";
import styles from "../../styles/CardAlt.module.css";

export default function CarCompAlt() {
    const games = [1, 2, 3, 4];
    const titles = ["Valorant", "Mw2", "RPGs", "Actions"];

    return (
        <>
            <section className={`${styles.trywarp}`}>
                {games.map((value, index) => {
                    return (
                        <article
                            key={index}
                            className={`${styles.thisJustWork}`}
                        >
                            <a
                                href=""
                                className={`${styles.cardArchorContainer}`}
                            >
                                <Image
                                    className={`${styles.imageContainer}`}
                                    src={
                                        "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Postgres_Query.jpg/1920px-Postgres_Query.jpg"
                                    }
                                    width={584}
                                    height={480}
                                    alt={`${2265}`}
                                    objectFit="cover"
                                    objectPosition="center"
                                ></Image>
                                <h3 className={`${styles.titleContainer}`}>
                                    {titles[index]}
                                </h3>
                            </a>
                        </article>
                    );
                })}
            </section>
        </>
    );
}

CSS

.trywarp{
    display: grid;
    grid-auto-flow: column;
    gap: 100px;
    overflow-x: scroll;
    overflow-y: clip;
}

.thisJustWork{
    width: 500px;
    height: 500px;
    background-color: brown;
}


.cardAnchorContainer{
    position: relative;
}

.imageContainer{
    position: absolute;
}

.titleContainer{
    position: absolute;
    z-index: 50;
    color: aliceblue;
}

The solution using useRef involves giving a width to "scrollableCategoryContent" to prevent an increase in gap.

import Image from "next/image";
import { HtmlHTMLAttributes, useEffect, useRef, useState } from "react";
import styles from "../../styles/Card.module.css";

export default function Card() {
    const refScrollableCategoryContent = useRef<any>();
    const [pixelGain, setPixelGain] = useState<number>(0);
    const [widthScrollable, setWidthScrollable] = useState<any>(
        refScrollableCategoryContent.current?.getBoundingClientRect().width
    );
    const listArticles = [1, 2, 3, 4];
    const textTitle = ["Vant", "Vam", "Puits", "JUmpP"];

    function resizeScrollable() {
        const widthRefScroll =
            refScrollableCategoryContent.current?.getBoundingClientRect().width;
        setWidthScrollable(widthRefScroll);
    }

    useEffect(() => {
        window.addEventListener("resize", resizeScrollable);
        resizeScrollable();

        return () => {
            window.removeEventListener("resize", resizeScrollable);
        };
    }, []);

    return (
        <>
            <div>
                <div>Window size: {widthScrollable}</div>
                <button
                    onClick={() => {
                        setWidthScrollable(
                            refScrollableCategoryContent.current?.getBoundingClientRect()
                        );
                    }}
                >
                    refScrollableCategoryContent
                </button>
            </div>
            
            <section
                className={`${styles.scrollableCategoryContent}`}
                ref={refScrollableCategoryContent}
            >

                {listArticles.map((art, index) => {
                    return (
                        <article key={index} className={`styles.Game${art}`}>
                            <a
                                href=""
                                className={`${styles.cardAnchorConteirner}`}
                                style={{
                                    left: `${(425 + pixelGain) * index}px`,
                                }}
                            >
                                <Image
                                    className={`${styles.cardImage}`}
                                    width={584}
                                    height={480}
                                    objectFit="cover"
                                    objectPosition="center"
                                    src={
                                        "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Postgres_Query.jpg/1920px-Postgres_Query.jpg"
                                    }
                                    alt="test"
                                ></Image>

                                <div
                                    className={`${styles.textCardBackGround}`}
                                >
                                    <h2
                                        className={`${styles.cardTitleText}`}
                                    >{`${textTitle[index]}`}</h2>
                                </div>
                            </a>
                        </article>
                    );
                })}
            </section>
        </>
    );
}

CSS

.scrollableCategoryContent{
    display: grid;
    grid-auto-flow: column;
    background-color: black;
    width: 1000px;
    height: 480px;
    overflow-x: scroll;
    overflow-y: clip;
}

.cardAnchorConreiner{
    position: relative;
}

.cardImage{
    position: absolute;
}

.textCardBackground {
    position: absolute;
    background-color: aqua;
    width: 100%;
    height: 20%;
    bottom: 20%;
}

.cardTitleText{
    color: white;
}