在flex方向上控制flex子级的高度：行方案

Question

我认为可能我想做的事只有CSS网格才有可能。这是一个示例：https://codepen.io/adambundy/pen/eYmmdjK

<main class="parent">
    <div class="child search">search</div>
    <div class="child results">results</div>
    <div class="child map">map</div>
</main>

我有一个基本布局，在flexbox父级中有3个子级。我已经将父级设置为任意的800px高度，该高度必须到位（实际上是应用程序中其容器高度的100％）。

在此的实际应用中，.search div的高度将不可预测且可变，因此我希望将其设置为自动高度。我希望其他2个div的高度扩大以填充剩余的高度。但是，flexbox会创建一个高度为容器高度（400px）一半的“轨道”，并将所有3个项目均设置为该高度。我知道align-items的默认设置是Stretch，但是如果我将其更改为在父级上弹性启动，或者在.search div上设置align-self：flex-start，则其他2个div仍然只有父级的高度，在.search div下方留有空隙。在搜索div上设置align-self：flex-start来查看差距：

要查看所需结果，请在.results项中取消注释CSS中的固定高度。但是，这将不起作用，因为搜索div的垂直方向可能更高或更短。看起来像这样：

*请注意，我知道我可以通过将结果和div封装在div中，然后在顶层的垂直方向上进行弯曲，然后在该新包装器内水平弯曲来做到这一点，但是我试图消除该div使用相同的标记获得更大的布局灵活性。