拉伸相邻列以匹配在伸缩布局中溢出的列的高度?

Question

我想拉伸相邻的列，以匹配使用flex布局的列的高度(显然没有硬编码的值)。较短的列是拉伸的(默认的flex子行为)，但在溢出容器的高度突然停止。我找到了使用display: grid和display: table-cell的解决方案，但我想知道如何在这个简化的演示中使用flex来完成这个工作:

https://jsfiddle.net/gk3Ltpy5/

* {
box-sizing: border-box;
}
#flex:checked~.outer {
display: flex;
align-items: stretch;
/* the default, but placed here anyway */
}
#grid:checked~.outer {
display: grid;
grid-template-columns: 30px 1fr;
}
#table-cell:checked~.outer .col {
display: table-cell;
}
.outer {
border: 2px solid red;
height: 300px;
width: 200px;
overflow: auto;
}
.col.foo {
min-width: 30px;
height: 900px;
border: 2px solid blue;
min-height: 0;
background: rgba(0, 0, 255, 0.1);
}
.col.bar {
width: 100%;
border: 2px solid green;
background: rgba(0, 255, 0, 0.1);
}

<h1>How to get the <code>.bar</code> container to match the height of the overflowed <code>.foo</code> div using <code>flex</code>?</h1>
<input type="radio" id="flex" name="solutions" checked="checked"><label for="flex">Flex solution?</label>
<input type="radio" id="grid" name="solutions"><label for="grid">Grid solution</label>
<input type="radio" id="table-cell" name="solutions"><label for="table-cell">Table-cell solution</label>
<div class="outer">
<div class="col foo">
foo
</div>
<div class="col bar">
bar
</div>
</div>

Answer 1

我不认为这可以单独与flexx工作。

问题是align-stretch，像其他flex关键字对齐属性(例如，justify-content,align-self等)在自由空间的范围内操作。

您的问题涉及溢出区域，这与可用空间无关。因此，我不认为flex属性可以帮助你。

Grid和Table示例之所以有效，是因为与Flex不同，它们具有实际的行，并且列存在于这些行中。因此，当foo项展开行时，bar列跟踪它。