css flex box 并将高度设置为子元素的 100%，但子元素拉伸等于屏幕高度？

Question

我有这样的 HTML

<div class="box-wrap">
    <div class="box">
        <h3>new tab h3</h3>
    </div>
    <div class="box">
        <h3>new tab h3</h3>
    </div>
    <div class="box">
        <h3>new tab h3</h3>
        <h3>new tab h3</h3>
    </div>
</div>

和css：

.box-1 {
    height: 100px;
    background: green;
    height: 100%;
}
.box-wrap {
    height: 100%;
    background: blue;
    display: flex;
    justify-content: space-between;
}
.box {
    background: yellow;
}

发生了一件很奇怪的事 当我将 .box 类的高度设置为 height: 100% 时，它将拉伸等于屏幕高度（我的电脑上的 HTML）。但在codepen中，它不是，如果另一个盒子更高，盒子只会拉伸等于另一个盒子高度的高度。

我真的希望我的 HTML 文件中的 css 在 codepen 中具有相同的行为 任何人都可以知道问题或导致此问题的原因吗？谢谢 这是codepen链接：https://codepen.io/kqt/pen/oqKXxR

Answer 1

你在那个 codepen 中有几个容器元素堆叠在一起，所以我不确定你到底遇到了哪个问题，但看起来你在谈论第二个。如果是这样，Temani Afif 是正确的，你需要在 body 和 html 元素上设置 100% 的高度，如果你想让它成为屏幕的高度，还需要将每个父 div 设置为你的 flex 容器的级别.你还有一个额外的 div 包裹着整个东西，上面没有 css 类，所以如果真的需要在那里，那么它也需要 100% 的高度，但你可以使用 body > div 选择它，如下所示：

html,
body, 
body > div,
.container,
.box-container {
  height: 100%;
}

演示：https://codepen.io/anon/pen/XqbGpV