仅使用flexbox在同级剩余空间中放置一个div

Question

我目前正在尝试仅使用 CSS 和 Flexbox 来使 div 适合空白空间， 但我找不到让它发挥作用的方法。

我无法更改 HTML 布局，也无法使用绝对定位。

.parent {
  display: flex;
  flex-direction: column;
}
.start {
  height: 200px;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.left {
  order: 1;
  height: 150px;
  background-color: lightblue;
}
.right {
  order: 2;
  height: 200px;
  background-color: blue;
}
.end {
  height: 50px;
  background-color: red;
}

.left, .right, .end {
  width: 50%;
}

<div class="parent">
  <div class="start">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="end"></div>
<div>

我想要得到的是：

仅使用flexbox可以实现吗？

Answer 1

使用现有的 HTML 代码应用 Flex 无法达到预期的结果（主要问题是这些块在 HTML 方面不在同一级别），但是您可以使用

float

left 和 right 来实现它：

.left {
  height: 150px;
  background-color: lightblue;
  float: left;
}

.right {
  height: 200px;
  background-color: blue;
  float: right;
}

.end {
  height: 50px;
  background-color: red;
  float: left;
}

.left,
.right,
.end {
  width: 50%;
}

<div class="parent">
  <div class="start">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="end"></div>
  <div>

Answer 2

你在这里！

.parent {
  display: flex;
  flex-direction: row;
  width:100%
}
.left {
  height: 200px;
  display: flex;
  flex-direction: column;
}

.start {
  height: 150px;
  background-color: lightblue;
}
.right {
  height: 200px;
  background-color: blue;
}
.end {
  height: 50px;
  background-color: red;
}

.left, .right {
  width: 100%;
}

<div class="parent">
  <div class="left">
    <div class="start"></div>
    <div class="end"></div>
    
  </div>
  <div class="right"></div>
<div>