Html 为什么flexbox仅用铬合金封盖儿童身高？

我有这个HTML：

<div class="parent">
    <div class="child1">
        child1
    </div>
    <div class="child2">
        <div class="child3" style="height: 100px;">
            child3
        </div>
    </div>
</div>

child3表示高度可变的自包含元素

随着其高度的增加，我希望它拉伸child2高度，但不要超过parent的高度，即父flex容器

我在这里将已知高度设置为parent，以简化问题，但它本身取决于页面布局的其余部分

为什么它可以在chrome上运行，而不能在IE或firefox上运行

当孩子3超过父母的身高时，问题的说明：

我在chrome开发工具中看到的正确行为说明：

以下是帮助查看问题的颜色（单击按钮几次）：

我需要child3computed height设置上限，这意味着它应该滚动或隐藏溢出

我不认为这是一个错误

---

也许只是一个肉伤

您可以在父对象中使用

填充

来“纠正”该错误，或者为父对象设置背景色。这对我很有用

根据您在文章中添加的内容，您需要在增加DIV之前检查DIV的大小，为此，您可以在java文件上执行类似的操作：

var counter = 10;
var div = document.querySelector('.child3');

window.increaseHeight = function (){
  if (counter<15) div.style.height = ++counter * 10 + "px";
}

var计数器=10；
var div=document.querySelector（'.child3'）；
window.increaseHeight=函数（）{
如果（计数器我找到了解决方案

以下是更新的小提琴：

溢出：隐藏；需要出现在所有父链上

与我的想法相反，结果是而不是child3溢出将被隐藏，它自身的高度现在是上限，因此它不会溢出

这意味着child3的内部布局现在是正确的，因为它的计算高度没有超出可见空间。否则，将定义为位于child3底部的div将被剪裁。例如。
我不认为您在IE11-10中描述的问题可能与此相关：也许小提琴和解释有助于OP理解d除了他想要剪辑还是溢出之外，哪里出了错误（高度或盒子是从内容中生长出来的？）？谢谢你补充，这有点帮助。；）很遗憾，我正在制作一个独立的元素（在这里表示为child3）这可以在任何上下文中使用。这个flexbox上下文就是其中之一。所以child3应该自己尝试扩展它的高度，因为它受到flexbox的限制。它无法知道它的父母。
var counter = 10;
var div = document.querySelector('.child3');

window.increaseHeight = function (){
  if (counter<15) div.style.height = ++counter * 10 + "px";
}

.parent {
    overflow: hidden;
}

.child2 {
    overflow: hidden;
}