如何通过CSS动态拉伸Flexbox列内元素填充容器高度？

你当前的问题核心在于使用了float布局，无法让两列自动保持等高，固定高度的方式也不适应item数量变化的场景。改用Flexbox布局可以完美解决这个动态高度匹配的需求，具体修改如下：

步骤1：重构容器布局 #

将.container从float布局改为Flex布局，这样两个.columns-2列会自动对齐并保持相同高度：

.container {
  min-width: 22em;
  width: 90%;
  max-width: 25rem;
  min-height: 50px;
  background-color: #ffff99;
  border-style: solid;
  box-sizing: border-box;
  margin: 0.75rem auto;
  padding: 0.5rem 0.5rem;
  /* 关键修改：启用Flex布局 */
  display: flex;
  gap: 0.5rem; /* 替代float的间距，可选 */
}

步骤2：调整列的样式 #

移除列的float和固定height，确保列能跟随容器的高度自适应：

.columns-2 {
  background-color: lightblue;
  border-style: solid;
  box-sizing: border-box;
  padding: inherit;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  /* 移除以下无效/错误属性 */
  /* float: left; */
  /* min-height: 1em; */
  /* height: 160px; */
}

步骤3：让第二列的item垂直拉伸 #

给带.stretched类的列中的item添加flex-grow: 1，这样item会自动填充列内的剩余垂直空间：

.stretched .item {
  flex-grow: 1;
  /* 保留原有样式，移除固定height */
  background-color: #d8d8d8;
  border-style: solid;
  padding: 0.5rem;
  text-align: center;
  /* 让item内部内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

完整修改后的CSS代码 #

.container {
  min-width: 22em;
  width: 90%;
  max-width: 25rem;
  min-height: 50px;
  background-color: #ffff99;
  border-style: solid;
  box-sizing: border-box;
  margin: 0.75rem auto;
  padding: 0.5rem 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.columns-2 {
  background-color: lightblue;
  border-style: solid;
  box-sizing: border-box;
  padding: inherit;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.item {
  background-color: #d8d8d8;
  border-style: solid;
  padding: 0.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stretched .item {
  flex-grow: 1;
}

原理说明 #

1. 容器用Flex布局：强制两列高度一致，不管每列的item数量多少，列的高度都会自动匹配最高的那一列。
2. 列内部用Flex垂直布局：让item在列内垂直排列，配合gap保持间距。
3. flex-grow:1控制item拉伸：第二列的item会平分列内的剩余空间，实现垂直填充的效果，完全适配动态变化的item数量。

内容的提问来源于stack exchange，提问作者K Wheeler