html - 第一个 flexbox child 没有长到第二行

Question

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

有两个问题。

1. 红色框不会增长到下一个 div，因此紫色框不会与右侧齐平
2. 蓝色框中的内容根据其内容增长，红色框中的分页器不会 float 到红色框的底部，而不会移动标题和列表。

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

我附上了一个 jsfiddle。下图说明了问题 #1 的预期结果以及箭头的红色框扩展。

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

下面是基本的 flexbox 父行。

.row {
    display: flex;
    flex: 0 1 auto;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
    box-sizing: border-box;
}

Answer 1

这完全有可能使用嵌套的 flexboxes 和 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>