css - 在 flex-direction 中控制 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 个子级。我已将父级设置为任意 800 像素高度，该高度需要就位（它实际上是应用程序中容器高度的 100%）。

在实际应用中，.search div 的高度是不可预测的和可变的，所以我希望它是自动高度。我希望其他 2 个 div 扩展高度以填充剩余高度。然而，flexbox 会创建一个容器一半高度（400 像素）的“轨道”，并且无论如何都将所有 3 个项目设置为这个高度。我知道 align-items 的默认值是拉伸，但是如果我在父级上将其更改为 flex-start，或者在 .search div 上设置 align-self:flex-start，其他 2 个 div 仍然只有一半父级的高度，在 .search div 下方留有空隙。在搜索 div 上设置 align-self:flex-start 以查看差距：

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

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

标签： cssflexboxcss-grid