对齐项目：拉伸和对齐自对齐：拉伸在没有固定高度的弹性行中不起作用

Question

我试图在一个高度不固定的flex行中添加一个垂直规则(它的大小适合其他内容(。

我希望垂直规则拉伸容器的整个高度(不包括填充(。我在flex行上尝试过align-items: stretch，在vertical rulediv上尝试过align-self: stretch，在verically rulediv中尝试过height: 100%，但无论我做什么，vertical rule似乎只有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>

有没有什么方法可以让我的.vrdiv拉伸到容器的整个高度，而不给容器一个固定的高度？

Answer 1

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