Css 在父母中分配3名儿童

我有一个div，其中有三个div，如下所示：

#parent
   #child-1
   #child-2
   #child-3

我希望它看起来像这样：

#parent
   #child-1
   #child-2
   #child-3

Child-2应该垂直使用可用空间，因为Child-3是display:none作为默认值，并且只有在某些事件中才会显示，所以它应该向上推Child-2。child-3也应该达到所需的高度

我喜欢使用flexbox，但我想我不能在这里使用它。 将它们放在另一个div中非常容易，只需在该框和flex direction:column上执行flex，但我没有这个机会，因此它们将与child-1位于同一个div中

---

那么，在不接触HTML结构的情况下使用纯CSS实现这一点的最简单方法是什么呢？

下面是一个工作示例：

#父级{
高度：50em；
}
div[id^=child]{
边框：2件纯黑；
框大小：边框框；
}
#孩子1{
身高：100%；
最小高度：32em；
背景：红色；
宽度：30%；
浮动：左；
保证金：0；
}
#孩子2{
身高：60%；
背景：绿色；
宽度：钙（70%-.4em）；
左边距：计算值（30%+0.4em）；
边缘底部：.4em；
}
#孩子3{
高度：钙（40%-.4em）；
最小高度：10em；
背景：黄色；
宽度：钙（70%-.4em）；
左边距：计算值（30%+0.4em）；
}

HTML5

可以将父级设置为特定/固定高度吗？几乎可以，但绿色的高度并没有占用它可以使用的空间。我的意思是，child-2和child-3加在一起将与child-1的高度相同，这只有在您知道父div的高度时才能实现。如果您不知道，则仅使用CSS无法实现这一点-然后您需要javascript进行计算。在

#parent

上将代码更新为具有已知高度的内容。然后它可以根据您的需要工作。父级高度已给定！：）实际上，在我尝试时，我得到了与您编写的代码相同的代码但是谢谢你的帮助！