Flexbox设置flex-flow:column wrap和height:min-content无法换行问题

问题描述 #

我有若干高度不同的div，希望父元素高度等于最高子元素的高度，其余元素自动换行。如下代码在row方向（父元素宽度为最宽子元素宽度）时可完美实现，但改为column方向（将body类改为column）时失效，请问该如何解决？

原代码

CSS

body.row #parent {
  display: flex;
  flex-flow: wrap row;
  width: min-content;
}

body.row .child {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: max-content;
}

body.column #parent {
  display: flex;
  flex-flow: wrap column;
  height: min-content;
}

body.column .child {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: max-content;
  width: max-content;
}

HTML

<html>
<body class="row">
  <div id='parent'>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
      <span>3. Line</span>
      <span>4. Line</span>
      <span>5. Line</span>
      <span>6. Line</span>
      <span>7. Line</span>
      <span>8. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
  </div>
</body>
</html>

问题原因 #

Flex布局的column wrap模式下，height: min-content无法像row方向的width: min-content那样触发预期的换行和高度匹配。浏览器对垂直方向的Flex容器高度计算逻辑和水平方向不同，min-content在这里无法正确限制容器高度为最高子元素的高度，导致容器会被拉长以容纳所有子元素而不换行。

解决方案：改用Grid布局 #

Grid布局在垂直方向的布局控制上更灵活，能轻松实现需求。修改body.column #parent的样式如下：

body.column #parent {
  display: grid;
  /* 自动根据子元素宽度填充列，超出后换行 */
  grid-template-columns: repeat(auto-fill, max-content);
  /* 让每一行高度等于最高子元素的高度 */
  grid-auto-rows: 1fr;
  /* 子元素顶部对齐 */
  align-items: start;
  /* 父容器高度刚好是一行的高度（最高子元素高度） */
  height: min-content;
}

效果说明 #

• grid-template-columns: repeat(auto-fill, max-content)：自动创建足够多的列来容纳子元素，当列的总宽度超过父容器可利用空间时，自动换行到下一行。
• grid-auto-rows: 1fr：强制每一行的高度一致，等于该行中最高子元素的高度。
• height: min-content：确保父容器的高度恰好等于一行的高度，也就是最高子元素的高度，所有子元素会在这个高度限制下自动换行排列。

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