第一个flexbox孩子没有成长为第二排

Question

我知道stackoverflow上有很多flexbox问题，而且我经常光顾很多但似乎没有一个适合我的用例。

有两个问题。

1. 红色框不会长到下一个div，所以紫色框不会与右侧齐平
2. 蓝色框中的内容会根据其内容而增长，红色框中的寻呼机不会浮动到红色框的底部，而不会移动标题和列表。

我正在尝试使红色框填充间隙向下到附加图像中显示的红色箭头，并且寻呼机也浮动到容器的底部。将鼠标悬停在蓝色框上将使蓝框的高度变得不方便。

我附上了一个jsfiddle。下面的图片说明了问题＃1的所需结果以及箭头的红色框扩展名。

https://jsfiddle.net/abthss0h/1/

以下是基本弹性框父行。

FS

Answer 1

这完全可以使用嵌套的flexbox和要包装的HTML的更改  第二个“专栏”。

.title {
  max-height: 82px;
}

#red {
  background-color: red;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}

#green {
  background-color: green;
  border: 1px solid green;
}

#blue {
  background-color: blue;
  flex: 1;
  border: 1px solid blue;
}

#blue:hover {
  height: 300px;
}

#purple {
  background-color: purple;
  border: 1px solid purple;
}

.row {
  display: flex;
  box-sizing: border-box;
}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.col-4 {
  width: 16.666%;
  float: left;
  box-sizing: border-box;
}

.col-24 {
  width: 100%;
  box-sizing: border-box;
}

.pager {
  margin-top: auto;
}

<div class="row">
  <div id="red" class="col-4">
    <div class="title col-24">
      <h3>Title Here</h3>
    </div>
    <div class="col-24">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
    </div>
    <div class="pager">Pager</div>
  </div>
  <div class="right">
    <div id="blue">
      Hover to change height
    </div>
    <div id="purple">
      Placeholder
    </div>
  </div>
</div>


<div class="row">
  <div id="green" class="col-24">
    Placeholder
  </div>
</div>