让 child 跨越不断增长的弹性项目的整个高度

Question

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

我试图让中间的 .block 元素 .flex-item 跨越其 parent 的整个高度，但它只是折叠起来。

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>

我可以将最后一段代码编辑为下面的内容以使其工作，但我不想让一个 child 显示为 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>

Answer 1

您可以设置如下：

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

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

在 Safari 中，这对我来说似乎是个窍门。如果你不想在 .grow 元素上使用 flexbox。

让 child 跨越不断增长的弹性项目的整个高度

Have child span the full height of a growing flex item

css

safari

flexbox