CSS 扩展一组 DIV 中的一个元素

Question

我目前正在尝试让一个元素 (div) 在父元素的可用空间上伸展自身，同时尊重其级别上其他元素的大小。我找到了一些解决方案并尝试了其中的大部分，但我无法让它发挥作用。我怀疑这是因为我正在使用的 cms - 当告诉它使一组列具有相同的高度时 - 将父显示样式更改为表格单元格。所以...这是我要存档的图像。

如前所述，CMS 将蓝色容器更改为显示：table-cell 以将其拉伸到整个区域并使一行中的所有列具有相同的高度。这个蓝色容器里面是我可以控制的元素。这些在父 div（黄色）内最多有四个 div（白色/绿色）。白色的 div 是动态的，并不总是存在，而绿色的 div 需要在整个垂直空间上延伸，无论存在哪个白色元素。

你想知道如何做到这一点吗？我尝试了很多关于这个主题的答案，但它们没有用。我认为这可能是因为蓝色容器是一个表格单元格？

编辑：这是我到目前为止所得到的。

<div id="box_wrap">
    <div class="box_title">
        Title
    </div>
    <div class="box_image">
        Image
    </div>
    <div class="box_content">
        Content
    </div>
    <div class="box_more">
        Read More
    </div>
</div>

所有这些都在 CMS 本身提供的容器中，该容器具有属性显示：table-cell。

#box_wrap {
    display: flex;
    flex-direction: column;
    }

.box_content {
    display: flex;
    flex: 2;
}

我认为问题可能是为我的 CMS 提供的容器没有定义的高度。如果我手动给我的#box_wrap 一个固定的高度，那么其中的 div 将按应有的方式工作。我还为 #box_wrap 尝试了 height: auto 和 height: 100% ，但它不起作用。同样，可能是因为父级没有定义的高度，不是吗？这是我需要解决的最后一件事。 #box_wrap 需要在垂直方向上延伸，目前它只延伸到它需要覆盖内容的范围内。

我还注意到我提供的第一张图片并非 100% 准确，因此我对其进行了更新。

Answer 1

我会用它来让.box_content 增长（即变得更高）而其他人则不会：

.box_title,
.box_image,
.box_image  {
  flex-grow: 0;
}
.box_content {
  flex-grow: 1;
}

此外，您应该将height: 100% 应用到#box_wrap，但为此，您还需要height: 100% 在body 和html 上获得#box_wrap 的高度参考。所以，总结一下：

html, body {
  height: 100%;
  margin: 0;
}
#box_wrap {
  height: 100%;
}

您可能还想添加...

body { 
  padding: 10px; 
  box-sizing: border-box;
}

...获得屏幕边缘和容器之间的距离，如图像中所示。