如何使用 flexbox 将所有元素放入 React-Bootstrap 卡片中？

Question

我有这个反应 bootstrap。我有一张由图片、一些文字和一个按钮组成的电影卡。我需要所有的卡片高度相同，但里面的数据不断溢出。它是用 bootstrap 构建的，因为它是一个训练营项目，我需要对其进行完善。我正在尝试将 flexbox 用于卡片，但遇到了问题。编辑：我希望卡片保持不变，这样文本就可以溢出，但它需要保持隐藏状态，而不是显示部分文本。

我想要的（注意文本如何被截断并且没有显示部分文本）

<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

这里有两种方法：

第一

限制描述字符，例如：

let description = movie.description;    
if (description.length > 120) {
    description = description.substring(0, 120);
}

或

卡片的高度必须为 100% 才能填充剩余的 space。
你的标题设置为flex-grow:1，为了把所有东西都往下推。

不要忘记在描述框上设置高度并且溢出：隐藏；

.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;
}

如何使用 flexbox 将所有元素放入 React-Bootstrap 卡片中？

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

css

reactjs

flexbox

react-bootstrap

card