How to make a horizontal scroll in css without whitespace: nowrap;

I want a horizontal scroll using cards. This is my markup

            <div class="d-flex mt-5 overflow-auto testimonial__container">
                <article class="testimonial">
                    <address class="testimonial__author-info d-flex align-items-center w-100">
                        <img
                            src="https://expertphotography.com/wp-content/uploads/2020/08/social-media-profile-photos-9.jpg"
                            alt="Mandy Thortstin"
                            class="testimonial__profile-pic mr-3"
                        />

                        <div class="testimonial__user-data d-flex flex-column align-items-start">
                            <p class="lead font-weight-bold m-0">Mandy Thorston</p>
                            <p class="font-weight-bold m-0">Parent</p>
                        </div>
                    </address>

                    <p class="lead testimonial__content mt-4">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation ullamco laboris nisi ut aliquip ex
                    </p>
                </article>
            </div>

My Css -

&__container {
    display: grid;
    grid-auto-flow: column;
    -moz-column-gap: 10rem;
    column-gap: 10rem;
    width: 90%;
}

According to what I found online, a horizontal scroll is implemented by -

white-space: nowrap
overflow-x: scroll;

However when I do this, all the text overflows its container and becomes one long, ugly line. I tried doing white-space: wrap inside the styles of the article, however the scroll goes away. Is there an alternative way to implement horizontal scroll or is there a workaround?