CSS：如何使div填充flex子对象内部的剩余高度

我有一个flex容器，里面有flex儿童。在每个flex child中，有两个div相互重叠，第一个div的高度未知。我想做第二个div的高度来填充剩余的高度。我到处都能看到flex解决方案，但我不知道如何实现它，因为2个div的父级本身就是flex子级

整个案例更为复杂，但我将尝试在这里简化代码：

<div class="flex-parent-row">

   <div class="flex-child">

      <div class="auto-height"></div>
      <div class="i-want-this-one-to-fill-remaining-height"></div>

   </div>

   ...more flex children...

</div>

…更多灵活的孩子。。。

而且，将“.auto-height”div放入内部。“i-want-this-one-to-fill-remain-height”目前不是选项

请帮忙：）谢谢

编辑：我做了一个完整的小提琴：

---

编辑-2:已解决！谢谢你的建议！这里是解决方案的重点：

如果您能够提供现有的CSS来更好地理解您要做的事情，那么它将更有帮助。然而，我希望下面的例子能帮助你解决你想要完成的事情

Html:

<div class="flex-parent-row">
   <div class="flex-child">
      <div class="auto-height"> auto div</div>
      <div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
   </div>
</div>

.flex-parent-row {
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 500px;
    border: 1px solid #000;
 }
.flex-child {
    border: 1px solid #000;
    background-color: red;
    display: flex;  
    flex-direction: column;
    flex-grow: 1; 
 }
 .auto-height {
    background: orange;
 }

 .i-want-this-one-to-fill-remaining-height {
    flex-grow: 1;
    background-color: lightblue;
 }

---

如果您需要其他帮助，请提供更多代码。

将

.flex子项

也制作为flex容器。给它

显示：flex；弯曲方向：立柱。然后给第二个孩子
flex-grow:1
。嗨，vanden1976，欢迎来到SO！请发布正在运行的代码（HTML和CSS），以便我们可以测试发生了什么：。但首先：flexbox子元素要么使用
flex-grow:1
，要么根据flexbox父元素的
flex-direction
简单地使用“height:100%”。谢谢你，Michael！我试试这个。我最近开始接触flex，我不知道孩子也可以成为父母。我很快就回来。谢谢你，雷内，我会把整个事情发出去，我很乐意。对不起，Paulie_D，我不认为这是一个重复的问题，我在提问之前做了大量的研究。谢谢！：）谢谢你，迈克尔·本杰明，成功了！在编辑后的问题中，我在问题前后都添加了一个链接。阿伦，谢谢！我会试试你的建议，然后回信！我很乐意帮忙。让我看看进展如何。快乐编码！解决了的！！！谢谢阿伦，也谢谢迈克尔·本杰明，他也提出了同样的建议！关于flex属性还有很多需要了解的地方。以下是之前的完整故事：之后的完整故事：我建议您查看它，它对我学习和理解flex有很大帮助