html - CSS使一列中的两个div占据与相邻div相同的高度

Question

我正在尝试为我正在处理的页面布置标题。

页眉的高度应设置为从中心的主图像开始。在这旁边是一对 div，一个在另一个上面，在 y 而不是 z 中。这两个中的下部是一个小图像，上部是一些文字。小图总是比主图短。

我想要的是对齐两个图像的底部，在较小的图像上方留出一个空间。然后我希望文本 div 自动填充该空间。

这是迄今为止我得到的最好的。有什么办法可以让它做我想做的事吗？

body {
     margin: 0;
     padding: 0;
     overflow-y: hidden;
     overflow-x: hidden;
}

html {
     height: 100%;
     width: 100%
}

.outertable {
     display: table;
     width: 100%;
     height: 100%;
}

.headerrow {
     display: table-row;
     height: 0px;
     background-color: #ffff80
}

.fillimage {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     background-color: #80ff80
}

.pad40 {
     display: table-cell;
     width: 40px;
     background-color: #ff80ff
}

.widthofcontents {
     display: table-cell;
     width: 0px;
}

.columntable {
     display: flex;
     flex-flow: column;
}

.textfillavailable {
     font-size:25px;
     flex-grow: 1;
}

.heightofcontents {
     height: 0px;
}

.bodyrow {
     display: table-row;
     height: 100%;
}

.bodycontent {
}

<div class="outertable">
  <div class="headerrow">
    <div class="fillimage">
      <img src="http://placekitten.com/250/120" />
    </div>

    <div class="pad40">
    </div>
    <div class="widthofcontents">
      <div class="columntable">
        <div class="textfillavailable">
          Hello
        </div>
        <div class="heightofcontents">
          <img src="http://placekitten.com/90/70" />
        </div>
      </div>
    </div>
    <div class="pad40">
    </div>
  </div>
  <div class="bodyrow">
    <div class="bodycontent" contentEditable="true" />
  </div>
</div>

-- 编辑--

显示我想要的 Ascii 艺术

+-------------------------------+----------+
|                               |   Text   |
|        Large                  +----------+
|        Image                  |  Small   |
|                               |  Image   |
+-------------------------------+----------+

整行的高度设置为大图像的高度。

Answer 1

我最好的猜测......但我会说你的设计可能非常脆弱......

https://codepen.io/sheriffderek/pen/1d48767a6d4b570924119e3dadc66bdf

<header>
    <section class="main">
        <img src="https://placehold.it/1600x900" alt="">
    </section>

    <section class="alternate">
        <section class="text">
            <p>Some text</p>
        </section>
        <section class="sub-image">
            <img src="https://placehold.it/800x450" alt="">
        </section>
    </section>
</header>

...

body {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
}

header {
    border: 1px solid red;
}

section {
    border: 1px solid blue;
}

header {
    display: flex;
    flex-direction: row;
}

.alternate {
    display: flex;
    flex-direction: column;
}

.alternate .text {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}