让孩子跨越一个不断增长的弹性项目的整个高度答案

【问题标题】：Have child span the full height of a growing flex item让孩子跨越一个不断增长的弹性项目的整个高度
【发布时间】：2021-06-21 16:30:15
【问题描述】：

编辑：这可能是 Safari 14.0.x for macOS 的问题。

我正在尝试使中间的 .block 元素 .flex-item 跨越其父元素的整个高度，但它只是折叠起来。

body {
    height: calc(100vh - 2 * 4px);
    margin: 4px;
}

div {
    box-sizing: border-box;
    border-width: 0.8vh;
    border-style: solid;
    padding: 2vh;
}

.flex {
    height: 100%;
    border-color: red;
    display: flex;
    flex-direction: column;
}

.flex-item {
    border-color: blue;
}

.box {
    height: 15vh;
    border-color: green;
    padding: 0;
}

.flex-item:last-child > .box {
    height: 8vh;
}

.grow {
    flex-grow: 1;
}

.grow > .box {
    height: 100%;
}

<div class="flex">
    <div class="flex-item">
        <div class="box"></div>
    </div>
    <div class="flex-item grow">
        <div class="box two"></div>
    </div>
    <div class="flex-item">
        <div class="box"></div>
    </div>
</div>

我可以将最后一段代码编辑为下面的内容以使其工作，但我不希望一个孩子显示为flex，而其他孩子显示为block。我还有其他方法可以做到这一点吗？

.grow {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.grow > .box {
    flex-grow: 1;
}

body {
    height: calc(100vh - 2 * 4px);
    margin: 4px;
}

div {
    box-sizing: border-box;
    border-width: 0.8vh;
    border-style: solid;
    padding: 2vh;
}

.flex {
    height: 100%;
    border-color: red;
    display: flex;
    flex-direction: column;
}

.flex-item {
    border-color: blue;
}

.box {
    height: 15vh;
    border-color: green;
    padding: 0;
}

.flex-item:last-child > .box {
    height: 8vh;
}

.grow {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.grow > .box {
    flex-grow: 1;
}

<div class="flex">
    <div class="flex-item">
        <div class="box"></div>
    </div>
    <div class="flex-item grow">
        <div class="box"></div>
    </div>
    <div class="flex-item">
        <div class="box"></div>
    </div>
</div>

【问题讨论】：

您发布的代码已经完成了您所说的尝试。
@ksav 出于某种原因，在 macOS 的 Safari 14.0.2 (16610.3.7.1.9) 上，它无法正确显示：中间的高度 .box 折叠。在适用于 iOS 的 Safari 14.1 上，它看起来不错。我会尝试更新我的电脑。
@ksav 它也不适用于 macOS 上的 Safari 14.0.3 (16610.4.3.1.7)。
在 14.0.1 (15610.2.11.51.10, 15610)、macOS Catalina 10.15.7 上按预期工作。
@0stone0 我想知道这是不是 macOS Big Sur 的问题。

标签： css flexbox safari

【解决方案1】：

你可以这样设置：

.grow {
    flex-grow: 1;
    height: 100%;
}

.grow > .box {
    height: 100%;
}

这对我来说似乎是 Safari 中的诀窍。如果您不想在 .grow 元素上使用 flexbox。

【讨论】：

不是您要找的东西？