Child flex Container doesn't want to respecting its parent container

Question

I want to achieve a proper card with proper padding around the side but it doesn't work out. the problem is the flex content container won't respecting the parent (card) by resizing the margin or reducing the distance or else. It won't resizing or following the properties. I try separately reducing the text size but doesnt work either.

   $(".owl-testimonials").owlCarousel({
        loop: true,
        item: 3,
        startPosition: 1,
        center: true,
        autoplay: false,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,

    });

.owl-testimonials {
            margin-bottom: 30px;
        }
        
        .testimonial-card {
            height: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-bottom: 20px;
            width: 100%;
            padding: 20px;
            display: flex;
            flex-direction: row;
            border-radius: 20px;
            background: white;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
            text-align: center;
            align-content: space-evenly;
            justify-content: center;
            transform: scale(0.5);
            transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
        }
        
        .owl-item.center .testimonial-card {
            transform: scale(0.8);
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
        }
        
        .testimonial-content {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .testi-img {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .testi-title {
            color: wheat;
            filter: drop-shadow(0 0 0.75rem #000);
            text-align: center;
            border-radius: 40px;
            margin-top: 30px;
            padding: 30px;
            width: 30%;
            margin-inline: auto;
            font-weight: bold;
            font-size: xx-large;
        }

    <h3 class="testi-title"> Testimonial</h3>
    <section class="owl-carousel owl-testimonials">
        <div class="testimonial-card">
            <img class="testi-img" src="images/team/team2.jpg" alt="Testimonial 1">
            <div class="testimonial-content">
                <h4>Bu Irma</h4>
                <h5 class="date">Dosen</h5>
                <p>
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                </p>
            </div>
        </div>

        <div class="testimonial-card">

            <img class="testi-img" src="images/team/team1.jpg" alt="Testimonial 2">
            <div class="testimonial-content">
                <h4>Pak Andre</h4>
                <h5 class="date">Kontraktor</h5>
                <p>
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                </p>
            </div>
        </div>
        <div class="testimonial-card">

            <img class="testi-img" src="images/team/team3.jpg" alt="Testimonial 3">
            <div class="testimonial-content">
                <h4>Pak Budi</h4>
                <h5 class="date">Pedagang Bakso</h5>
                <p>
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                </p>
            </div>
        </div>
    </section>

Answer 1

The text-overflow won't kick in until your text overflows first.
Change this:

.owl-item .testimonial-card {
   height: 300px;
   text-overflow: ellipsis;
}

To this:

.owl-item .testimonial-card {
   height: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
}