How to fit all elements into React-Bootstrap cards with flexbox? - css

Question

I have this going in react bootstrap. I have movie cards which consist of a picture, some text and a button. I need all of the cards to be equal height but the data inside keeps overflowing. It is built with bootstrap because it was a bootcamp project and I need to polish it up. I am trying to use flexbox for the cards but am having trouble.
EDIT:
I want the cards to remain the same so the text can overflow but it needs to stay hidden and not show partial text.
What I want (Notice how the text cuts off and there is no partial text showing)
<Card className="cardClass">
<div style={{textAlign: 'center'}}>
<Card.Img className="card-image" variant="top" src={movie.ImagePath} />
</div>
<Card.Body>
<div className="card-text-body">
<Card.Title>{movie.Title}</Card.Title>
<Card.Text>{movie.Genre.Name}</Card.Text>
<Card.Text className='card-description'>{movie.Description}</Card.Text>
<Link to={`/movies/${movie._id}`}>
<Button className="movieCard-btn" variant="primary">View Movie</Button>
</Link>
</div>
</Card.Body>
</Card>
.card {
margin-bottom: 4rem;
background-color: rgb(247, 247, 247);
}
.cardClass {
max-width: 100%;
height: 400px;
}
.card-image{
width: 100px;
height: 150px;
object-fit: cover;
text-align: center;
}
.card-title {
font-weight: 900;
}
.card-text-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.card-description {
font-size: 13px;
overflow: hidden;
}
.card-body {
font-weight: 400;
}
.movieCard-btn {
width: 100%;
margin-top: 1rem;
}
.btn .btn-primary {
text-align: center!important;
}
.btn-primary {
color: black;
background-color: goldenrod;
border-color: black;
}
.btn-primary:hover {
color: black;
background-color: goldenrod;
border-color: black;
}
a {
text-decoration: none!important;
}

Answer 1

Two approaches here:
First
Limit the description characters, something like:
let description = movie.description;
if (description.length > 120) {
description = description.substring(0, 120);
}
Or
Card must be 100% height to fill remaining space.
Your title set to flex-grow: 1, in order to push everything down below.
Don't forget to set height on description box and also overflow: hidden;
.card {
margin-bottom: 4rem;
background-color: rgb(247, 247, 247);
height: 100%;
}
.card-title {
font-weight: 900;
flex-grow: 1;
}
.card-description {
font-size: 13px;
overflow: hidden;
height: 100px;
}