Html css flex布局将子对象放入flex框

我想让一个孩子完全填满flex布局的整个flex框

如果我使用以下HTML：

<div class="parent">
    <div class="child1">
        should have 100px height
    </div>
    <div class="child2">
        <div class="intermediatechild2">
            <div class="subchild2">should have 200px height and padding</div>
        </div>
    </div>
</div>

我得到了一个超负荷的中间层。100%的高度似乎是相对于父项的

可以在这里找到小提琴：

---

我不太明白你到底想要什么，但如果你想要的只是离开。100%分子女2，并遵循父亲身高（中间身高2），您必须将父亲身高（中间身高2）与px相加，然后删除该身高。孩子2

回想起来，你必须以父亲的身高（中间层2）来计算填充物，所以如果你愿意的话。Subchild2的高度为200px，将不得不让她的父亲（intermediatechild2）的高度为240px，留下20个填料顶部和20个填料底部的高度超过200

请注意，仅在chrome中工作，因为您的css代码是非标准的，如果您愿意，我可以在另一时间给他哺乳=）

希望能有帮助

---

这里有一个例子：

只需从

.child2

中删除

高度：100%

，它就会工作。这将为child2元素提供100%的高度，因此它位于父元素之外

---

它应该是自动调整的，这是flexbox的目的，100%的高度是给孩子们更多的高度（和父母一样）。

我解决了这个问题。解决方案在于保持“display:flex”。一旦启动flex布局，您似乎无法返回到“高度：100%”的“显示：块”

---

工作小提琴：

你想做什么？我不明白你的问题…谢谢Viken，你的评论绝对有道理，所以我从.child2中删除了heigh:100%。现在，盒子可以完美缩放，但内部容器。intermediatechild无法填充盒子。即使我将其设置为身高：100%，我希望是父母身高的100%（在我们的例子中是200px），您手头有解决方案吗？谢谢Carra，我不能计算中间层的高度，我希望css能帮我计算，因为我使用的是flex布局。请注意我对维肯回答的评论

.parent {
    display: flex;
    flex-direction : column;
    height: 300px;
    width: 200px;
}

.child1 {
    height: 100px;
    background: #008800;
    flex: 0 0 auto;
}

.child2 {
    height: 100%;
    background: #003300;
    flex: 0 0 auto;
 }

.subchild2 {
    height : 100%;
    background: #ff0000;
 }

.intermediatechild2 {
    padding: 20px;
    height : 100%;
    width : 100%;
    box-sizing: border-box;
    border: 2px solid blue;
 }

<div class="parent">
    <div class="child1">
        should have 100px height
    </div>
    <div class="child2">
        <div class="intermediatechild2">
            <div class="subchild2">should have 200px height including padding</div>
        </div>
    </div>
</div>

.parent {
    display: flex;
    flex-direction : column;
    height: 300px;
    width: 200px;
}

.child1 {
    height: 100px;
    background: #008800;
}

.child2 {
    background: #003300;
    flex: 1;
    display: flex;
}

.subchild2 {
    background: #ff0000;
    flex: 1;
}

.intermediatechild2 {
    padding: 20px;
    display : flex;
    box-sizing: border-box;
    border: 2px solid blue;
}