css - Flex - 内容底部对齐

Question

如何使用 flex 制作此布局？左栏有动态高度的文本

右栏有两部分...与顶部对齐的文本和与底部对齐的文本。用 flex 可以吗？

------------------------------------------
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXXXX   | XX Align To Top XX |
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXXXX   |                    |
| Dynamic Height    |       Empty        |
| XXXXXXXXXXXXXXX   |                    |
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXXXX   |  Align to bottom   |
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
------------------------------------------

Answer 1

* {
  box-sizing: border-box;
}

div {
  border: 1px solid black;
}

.parent,
.child {
  display: flex;
}

.child {
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis m ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis m ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis m ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis quia nisi, quos vero architecto amet, incidunt sint tempore fugit, nulla in, saepe perspiciatis eos eius odit!</div>
  <div class="child">
    <div class="top">Top</div>
    <div class="bottom">Bottom</div>
  </div>

</div>