Inline Flex布局问题：div高度适配及双列堆叠需求

嘿，这两个布局问题我之前也碰到过，给你整理了具体的解决思路和代码示例：

1. 解决Div高度无法适配文本内容的问题 #

首先排查最常见的原因：你是不是给白色容器设置了固定的height或min-height？如果写死了高度值，容器自然不会随内部文本内容变化。把固定高度改成height: auto（其实默认就是auto，只要删掉固定高度的代码就行）。

另外，如果你用了inline-flex，还要注意：默认情况下align-items: stretch会让同一行的所有flex容器拉伸到相同高度。如果想要每个容器高度独立适配自己的内容，给容器加上align-self: flex-start（针对单个容器），或者给父级flex容器设置align-items: flex-start（统一控制所有子容器）。

举个修正后的代码例子：

/* 错误写法：固定高度导致无法适配内容 */
.white-container {
  display: inline-flex;
  height: 200px; /* 这里写死了高度，是问题根源 */
  background: #fff;
}

/* 正确写法：让高度随内容自适应 */
.white-container {
  display: inline-flex;
  /* 去掉固定height，默认就是height: auto */
  align-self: flex-start; /* 避免被父容器强制拉伸到同高 */
  background: #fff;
  padding: 1rem; /* 加个内边距让内容不贴边 */
}

2. 实现双列堆叠布局（新增Div自动换行） #

你之前遇到的“加第三个Div就新增一列”的问题，是因为inline-flex属于行内级容器，它不会触发换行。想要实现“一行两列，超出后自动换行”的效果，推荐用CSS Grid或者Flexbox，两种方案都很靠谱：

方案1：CSS Grid（最直观） #

给父容器设置固定两列，新增的子元素会自动跳到下一行：

.parent-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列，每列宽度平分父容器 */
  gap: 1.5rem; /* 容器之间的间距，可选 */
}

.white-container {
  background: #fff;
  padding: 1rem;
  /* 内部如果需要flex布局再设置display: flex/inline-flex */
}

方案2：Flexbox（兼容性更广泛） #

给父容器开启flex-wrap: wrap，再给每个子容器设置固定宽度占比，超出后自动换行：

.parent-container {
  display: flex;
  flex-wrap: wrap; /* 关键：允许子元素换行 */
  gap: 1.5rem;
}

.white-container {
  flex: 0 0 calc(50% - 0.75rem); /* 减去gap的一半，避免容器溢出父容器 */
  background: #fff;
  padding: 1rem;
}

这样不管你加多少个white-container，都会自动按两列堆叠，不会新增列啦～

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