In my project using React Bootstrap, I have movie cards that include images, text, and buttons. However, the content inside the cards keeps overflowing, and I need all cards to have equal height. The project was initially built with Bootstrap during a bootcamp, and now I'm looking to refine it. I've been attempting to use flexbox for the cards, but I'm encountering some difficulties. EDIT: I want the cards to maintain their current appearance with overflowing text hidden from view without showing partial content.
https://i.sstatic.net/Ixp2K.png
Desired Outcome (Note how the text is cut off without displaying partially)
https://i.sstatic.net/Hj2BT.png
<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;
}