如何设置Flexbox最小高度为内容高度并实现容器等高？

针对你遇到的两个需求，只需调整CSS样式即可实现，具体修改如下：

核心修改思路 #

1. 让父级flex容器不再强制固定高度，改为自适应内容高度，同时让子元素自动拉伸对齐高度
2. 修复.split-content的flex布局属性，确保内部元素垂直排列且容器能包裹内容

修改后的CSS代码 #

.split {
  display: flex;
  align-items: stretch; /* 替换align-items:center，让子元素自动拉伸至同高 */
  min-height: 100%; /* 替换height:100%，允许容器高度随内容扩展 */
}

.split-heading {
  border-radius: 8px 0 0 8px;
  min-width: 3em;
  display: flex; /* 让内部h2垂直居中，保持原视觉效果 */
  align-items: center;
  justify-content: center;
}

.split-content {
  flex-grow: 1;
  display: flex; /* 新增，让flex-direction属性生效 */
  flex-direction: column;
  gap: 1rem; /* 可选，给内部元素添加间距 */
  border-radius: 0 8px 8px 0;
  padding: 1rem 2rem; /* 调整上下内边距，避免内容贴边 */
  background: #ecf0f1;
}

效果说明 #

• 需求1实现：.split-content的display:flex配合父容器的min-height:100%，让容器最小高度自动匹配内部内容高度（包含内边距、元素间距），窗口缩小时内容不会溢出
• 需求2实现：父容器的align-items:stretch会强制.split-heading和.split-content保持相同高度，无论内容多少都能对齐

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