I have this situation.
enter image description here
I want to strength inner black div to 70% of outer flex div, and title inner div with gradient to 30% of parent div.
Html looks like this:

<div class="pricings container-flex row">
                <div class="one-price">
                    <div class="price-title">
                        <h3>Basic</h3>
                        <p>Free</p>
                    </div>
                    <div class="price-descr">
                        <p>
                            - Access 500+ yoga, meditation and movement classes
                            from our extensive library
                        </p>
                        <p>
                            - Access 1st two classes released by new teachers to
                            DYWM
                        </p>
                    </div>
                </div>
                <div class="one-price">
                    <div class="price-title">
                        <h3>Monthly</h3>
                        <p>$13.99 / Month</p>
                    </div>
                    <div class="price-descr">
                        <p>
                            - Access 1000s of AD-FREE yoga, meditation and
                            movement classes
                        </p>
                        <p>
                            - Exclusive access to all new releases and premium
                            content
                        </p>
                        <p>
                            - Access our complete collection of curated programs
                            & challenges
                        </p>
                        <p>- 25% off livestream events</p>
                        <p>- Follow your favorite teachers</p>
                        <p>- Curate your own collection of favorite classes</p>
                        <p>- Access to our Mobile and TV app</p>
                    </div>
                </div>
                <div class="one-price">
                    <div class="price-title">
                        <h3>Annual</h3>
                        <p>$108.99 / Year ( $9 / Month )</p>
                    </div>
                    <div class="price-descr">
                        <p>
                            - Access 1000s of AD-FREE yoga, meditation and
                            movement classes
                        </p>
                        <p>
                            - Exclusive access to all new releases and premium
                            content
                        </p>
                        <p>
                            - Access our complete collection of curated programs
                            & challenges
                        </p>
                        <p>- 25% off livestream events</p>
                        <p>- Follow your favorite teachers</p>
                        <p>- Curate your own collection of favorite classes</p>
                        <p>- Access to our Mobile and TV app</p>
                    </div>
                </div>
            </div>

and css

.container-flex {
    display: flex;
}
.row {
    flex-direction: row;
}
.pricing-section {
    width: 100%;
    background-image: url(assets/palmsNight.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.pricing-section > :first-child {
    font-size: var(--fs-main-titles);
    margin-top: clamp(50px, 6vw, 200px);
}
.pricing-section > *,
.pricing-section > div:last-child p {
    margin-bottom: 18px;
}
.pricing-section > div:last-child p:last-child {
    text-align: end;
}
.pricings {
    justify-content: space-between;
    gap: clamp(10px, 2vw, 35px);
    width: 90%;
}
.one-price {
    border: solid 1px black;
}
.pricings p {
    margin-bottom: clamp(10px, 2vw, 35px);
}
.price-title {
    display: flex;
    flex-direction: column;
    background: rgb(0, 0, 0);
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 5%,
        rgba(255, 255, 255, 0) 100%
    );
    padding: 15px;
}
.price-title h3 {
    font-size: clamp(10px, 2vw, 30px);
}
.price-descr {
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: black;
    padding: 15px;
}

I set heights:

.price-title {
    height:30%;
    display: flex;
    flex-direction: column;
    background: rgb(0, 0, 0);
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 5%,
        rgba(255, 255, 255, 0) 100%
    );
    padding: 15px;
}
.price-title h3 {
    font-size: clamp(10px, 2vw, 30px);
}
.price-descr {
    height:70%;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: black;
    padding: 15px;
}

An this is what I get:
enter image description here
How to remove this text overflows. Or how to make it right way?