使用overflow-scroll/overflow:scroll无法实现滚动的影院座位布局问题

问题核心 #

你遇到的问题是滚动容器未触发滚动条，本质原因是滚动容器没有设置明确的高度/最大高度限制。overflow: scroll 或 overflow-scroll 类只有在容器尺寸固定、内容超出容器范围时才会生效，否则容器会被内容自动撑开，不会出现滚动条。

解决方案 #

给滚动容器添加最大高度限制，比如设置为视口高度的50%（max-height: 50vh），这样当座位内容的高度超过视口一半时，容器就会自动出现滚动条。同时推荐使用 overflow: auto 替代 overflow: scroll，它只会在内容超出时显示滚动条，更符合交互体验。

Vue 环境修改代码 #

<div class="w-50">
    <!-- 添加max-height和overflow-auto类（或自定义样式） -->
    <div class="border overflow-auto" style="max-height: 50vh;">
      <div v-for="row in seats" class="d-flex">
        <div v-for="seat in row" :key="seat.id" class="seat"></div>
      </div>
    </div>
</div>

.seat {
  width: 50px;
  height: 50px;
  background: dodgerblue;
  border: solid black;
  /* 可选：给座位添加间距，更贴近影院布局 */
  margin: 2px;
}

纯HTML+CSS环境修改代码 #

index.html

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>影院座位</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div style="width: 50%;">
    <!-- 添加max-height和overflow:auto -->
    <div style="border: solid black; overflow: auto; max-height: 50vh;">
      <div style="display: flex;">
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
      </div>
      <div style="display: flex;">
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
      </div>
      <!-- 可以多添加几行座位测试滚动效果 -->
      <div style="display: flex;">
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
        <div class="seat"></div>
      </div>
    </div>
  </div>
</body>

</html>

style.css

.seat {
  width: 50px;
  height: 50px;
  background: dodgerblue;
  border: solid black;
  margin: 2px;
}

额外说明 #

• 如果你的需求是座位占用父容器的50%空间才滚动，而非视口的50%，可以给父容器设置固定高度，然后滚动容器的max-height设为父容器高度的50%（比如父容器高度400px，滚动容器max-height: 200px）。
• 若需要横向滚动，可添加overflow-x: auto，同时确保座位行的总宽度超过滚动容器的宽度。

内容的提问来源于stack exchange，提问作者Dmytro Kotenko