如何实现Flex子项按需高度显示且不超出容器（仿Trello列表效果）

需求与问题 #

我想实现类似Trello的列表效果：短列表高度按需展示，长列表最高不超过容器高度并自动出现滚动条。

现有代码如下：

CSS代码 #

.container{
  background-color: #00000020;
  display: flex;
  gap: 1em;
  height: 80vh;
  /*align-items: flex-start; */
  justify-content: space-around;
}

.variableHeightBlock {
  background-color: #00000020;
  overflow-y: auto;
  padding: 1em;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

HTML代码 #

<div class="container">
  <div class="variableHeightBlock">
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line
  </div>
  <div class="variableHeightBlock">
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line
  </div>
</div>

当前问题：

• 不开启align-items: flex-start时，短列表会被容器强行拉长；
• 开启该属性后，长列表直接溢出容器，无法触发滚动。

解决方案 #

只需修改CSS即可实现需求，完整修改后的代码如下：

.container{
  background-color: #00000020;
  display: flex;
  gap: 1em;
  height: 80vh;
  align-items: flex-start; /* 开启该属性，避免短列表被拉伸 */
  justify-content: space-around;
}

.variableHeightBlock {
  background-color: #00000020;
  overflow-y: auto;
  padding: 1em;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  flex: 0 1 auto; /* 禁止放大、允许缩小、初始高度自适应内容 */
  max-height: 100%; /* 限制列表最高不超过容器 */
  box-sizing: border-box; /* 内边距纳入高度计算，避免额外撑开高度 */
}

关键属性说明 #

• align-items: flex-start：确保短列表保持自身内容高度，不会被flex容器拉伸；
• flex: 0 1 auto：固定列表不会被容器强制放大，同时允许内容过长时收缩到max-height限制；
• max-height: 100%：锁定列表最高高度为容器高度，超出部分触发滚动；
• box-sizing: border-box：让内边距和边框都包含在元素的宽高内，避免padding导致列表超出容器。

内容的提问来源于stack exchange，提问作者Bo Thompson