html - 子 div 占用超过 100% 的父级忽略兄弟姐妹的位置和溢出容器

Question

好的，所以我正在尝试实现我自己的模式。对我来说有点学习曲线。

灰色背景是固定位置元素

.prod_back
    position: fixed
    width: 100%
    height: 100%
    background: $main-op50
    left: 0
    top: 0
    z-index: 1060
    transition: .75s
    opacity: 0

然后我们有白色模态背景，它是上述 div（类）的子元素

.prod_cont
    width: 60%
    margin: auto
    align-self: center
    justify-self: center
    text-align: center
    background: $super_light
    transition: 0.75s
    z-index: 1061

看起来像这样

<div id="prod_page" class="prod_back">
    <div id="prod_cont" class="prod_cont shadow-lg border rounded overflow-hidden">
         <div id="content_container" style="height:100%">

         </div>
    </div>
</div>

然后使用引导网格，我有一行作为标题（带列），另一行作为内容。与此类似的东西。

<div class="row">
    <div class="col-12">
        TITLE
    </div>
</div>
<div class="row">
    <div class="col-12">
        Images etc 
    </div>
</div>

当我将第二行的高度设置为 100% 时（下面的蓝色部分）。它似乎完全忽略了其兄弟元素的位置，并将其高度设置为父元素高度的 100%。

这是预期的行为吗？为什么？

我的理解是 100% 的高度将填充 100% 的剩余空间而不是父空间。

有没有办法实现我所追求的？即填充剩余空间而不会溢出？

我目前正在用 JS 固定高度，但知道这不是理想的情况。

标签： htmlcsstwitter-bootstrap