如何避免Flexbox在换行成列前占用全部max-height？

我有一个可换行成多列的Flexbox容器。换行后，最左侧列的底部元素下方会多出一段空白，我希望底部蓝色矩形与绿色div底部的间距等于蓝色矩形的margin，而非绿色div max-height带来的多余空间。实际场景中蓝色矩形高度不一，这是UI的简化版本。我希望绿色容器底部与最后一个蓝色矩形对齐，而非留有红色叉标记的多余绿色区域。

问题示意图 #

理想效果示意图 #

复现代码 #

CSS代码 #

/* Styles go here */

.FlexDiv{
    display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 100px;
    max-height:445px;
  writing-mode: vertical-lr;
    background-color: green;
}

.Rectangle{
    margin: 5px;
    display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: 69px;
  min-width: 100px;
  width: 100px;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
    background-color:blue;
}

.LoadingText{
  position:relative;
  left: 50%;
  top:50%;
  color:white;
}

HTML代码 #

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>

<div class="FlexDiv"> 
  <div class="Rectangle"></div>
  <div class="Rectangle"></div>
  <div class="Rectangle"></div>
  <div class="Rectangle"></div>
  <div class="Rectangle"></div>
  <div class="Rectangle"></div>
  <div class="Rectangle"></div>
  
</div>

  </body>

</html>

Flexbox可以实现这个效果，问题根源是writing-mode: vertical-lr配合flex-wrap: wrap时，容器的max-height会强制固定高度，导致多余空白。以下是两种可行的解决方式：

方法一：改用CSS Grid布局（推荐） #

Grid在垂直多列排列场景下适配性更强，能自动让容器高度贴合内容：

.FlexDiv{
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-auto-flow: column; /* 垂直方向创建新列 */
    max-height:445px;
    writing-mode: vertical-lr;
    background-color: green;
    gap: 10px; /* 替代margin，避免margin重叠问题 */
}

.Rectangle{
    min-height: 69px;
    min-width: 100px;
    width: 100px;
    background-color:blue;
}

说明：用gap替代margin可以避免元素间的margin叠加，Grid会自动让容器底部对齐最后一个元素，不会出现多余空白。

方法二：Flexbox配合JS动态计算高度 #

如果必须使用Flexbox，可以去掉容器的max-height，通过JS动态计算容器的最大高度，确保刚好容纳所有排列后的元素：

.FlexDiv{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 100px;
    writing-mode: vertical-lr;
    background-color: green;
}

.Rectangle{
    margin: 5px;
    min-height: 69px;
    min-width: 100px;
    width: 100px;
    background-color:blue;
}

const flexContainer = document.querySelector('.FlexDiv');
const rectangles = document.querySelectorAll('.Rectangle');

// 计算每列能容纳的元素数量
const columnItemCount = Math.floor(flexContainer.clientHeight / (69 + 10)); // 69是矩形高度，10是上下margin总和
// 计算容器需要的最大高度
const containerMaxHeight = Math.ceil(rectangles.length / columnItemCount) * (69 + 10) - 5; // 减去底部多余的margin

flexContainer.style.maxHeight = `${containerMaxHeight}px`;

说明：这种方式需要根据元素实际高度和margin动态计算，适合元素高度不固定的场景，还需要额外处理窗口resize的情况。

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