align-items:stretch 和 align-self:stretch 在没有固定高度的 flex 行中不起作用

Question

我正在尝试在高度不固定的 flex 行中添加垂直规则（它的大小适合其其他内容）。

我希望垂直规则可以拉伸容器的整个高度（不包括填充）。我在 flex 行上尝试了align-items: stretch，在垂直规则 div 上尝试了align-self: stretch，在垂直规则 div 上尝试了height: 100%，但无论我做什么，垂直规则似乎只有 0px 的高度：

.row {
  display: flex;
  flex-direction: row;
  background-color: orange;
  width: max-content;
  align-items: stretch;
  margin-bottom: 12px;
  padding: 12px;
  height: max-content;
}

.vr {
  height: 100%;
  width: 1px;
  background-color: black;
  align-self: stretch;
}

.purple {
  background-color: purple;
  height: 80px;
  width: 50px;
}

.lightblue {
  background-color: lightblue;
  height: 80px;
  width: 50px;
}

.red {
  background-color: red;
  height: 120px;
  width: 50px;
}

.blue {
  background-color: blue;
  height: 120px;
  width: 50px;
}

<div class="row">
  <div class="red"></div>
  <div class="vr"></div>
  <div class="blue"></div>
</div>

<div class="row">
  <div class="purple"></div>
  <div class="vr"></div>
  <div class="lightblue"></div>
</div>

有什么方法可以让我的.vr div 伸展到容器的整个高度而不给容器一个固定的高度？

Answer 1

从.vr 规则中删除height: 100% 对我有用。