如何调整Flexbox布局实现电影卡片图片统一对齐？

我正在为大学项目搭建网站，遇到一个布局问题：网页中的#movie-slider Flexbox容器内包含多个movie-banner电影卡片Flexbox，部分电影标题过长导致图片被向下挤压，具体代码片段如下：

JavaScript代码 #

class Movie {
  constructor(title, image, description, duration, release, age, schedule, seats) {
    this.title = title;
    this.image = image;
    this.description = description;
    this.duration = duration;
    this.release = release;
    this.age = age;
    this.schedule = schedule; //dictionary met alle tijden per dag.
    this.seats = seats;
  }
}

const blankMovie = new Movie(
  "Blank",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAAC8CAMAAAC672BgAAAAA1BMVEWxrq37BefPAAAARklEQVR4nO3BAQEAAACAkP6v7ggKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoAbFjAAB3KzK6gAAAABJRU5ErkJggg==",
  "blank",
  "blank"
);

const longtitleMovie = Object.assign({}, blankMovie, { title: "Loooooooooooooong Title" })

var allMovies = [blankMovie, blankMovie, blankMovie, blankMovie, longtitleMovie, longtitleMovie, longtitleMovie];
const homePage = document.getElementById("movie-slider");

for (let i = 0; i < allMovies.length; i++) {
  const movieDiv = document.createElement("div");
  movieDiv.className = "movie-banner";

  const movieTitle = document.createElement("span");
  movieTitle.className = "movie-banner__title";
  movieTitle.textContent = allMovies[i].title;

  const movieImage = document.createElement("img");
  movieImage.className = "movie-banner__image";
  movieImage.src = allMovies[i].image;

  const movieDur = document.createElement("span");
  movieDur.className = "movie-banner__desc";
  movieDur.textContent = allMovies[i].duration;

  homePage.appendChild(movieDiv);
  movieDiv.appendChild(movieTitle);
  movieDiv.appendChild(movieImage);
  movieDiv.appendChild(movieDur);
}

CSS代码 #

body {
  margin: 0;
  font-family: 'Teko', sans-serif;
}

#movie-slider {
  display: flex;
  flex-direction: row;
  overflow: auto;
  gap: 10px;
  padding: 0% 10%;
}

#movie-slider::-webkit-scrollbar {
  height: 0;
}

.movie-banner {
  flex-basis: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.movie-banner__image {
  object-fit: cover;
  height: 100px;
}

.movie-banner__title {
  color: wheat;
  text-align: center;
  font-family: 'Bebas Neue', cursive;
  font-size: 2em;
  padding: 10px
}

.movie-banner__desc {
  color: wheat;
  font-size: 1.3em;
  text-align: center;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Movie Tickets</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/index.css">
  <link rel="stylesheet" href="/css/general.css">
  <!--<link rel="icon" href="../images/general/logo.jpg">-->
</head>

<body>
  <article class="content">
    <section id="movie-slider">
    </section>
  </article>
  <script src="/js/index.js" type="module"></script>
  <script src="/js/general.js" type="module"></script>
</body>

</html>

要让所有图片保持对齐，同时允许标题按需调整高度，核心是通过CSS固定图片区域的位置，让标题区域自动分配剩余空间并处理溢出。以下是修改方案：

关键CSS修改点 #

1. 给movie-banner设置固定总高度，并指定内容从顶部排列，确保所有卡片尺寸一致
2. 给标题区域添加flex:1，让它自动填充卡片的剩余空间，同时处理文字溢出
3. 给图片和描述区域添加flex-shrink:0，防止它们被挤压变形

修改后的完整CSS代码 #

body {
  margin: 0;
  font-family: 'Teko', sans-serif;
}

#movie-slider {
  display: flex;
  flex-direction: row;
  overflow: auto;
  gap: 10px;
  padding: 0% 10%;
}

#movie-slider::-webkit-scrollbar {
  height: 0;
}

.movie-banner {
  flex-basis: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 300px; /* 固定卡片总高度 */
}

.movie-banner__image {
  object-fit: cover;
  height: 100px;
  flex-shrink: 0; /* 禁止图片被挤压 */
}

.movie-banner__title {
  color: wheat;
  text-align: center;
  font-family: 'Bebas Neue', cursive;
  font-size: 2em;
  padding: 10px;
  flex: 1; /* 自动填充剩余空间 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-wrap: wrap; /* 过长标题自动换行 */
}

.movie-banner__desc {
  color: wheat;
  font-size: 1.3em;
  text-align: center;
  flex-shrink: 0; /* 禁止描述被挤压 */
}

内容的提问来源于stack exchange，提问作者Jord van Eldik