为什么不弯曲项目填充剩余空间？

Question

我正在尝试使用flexbox对齐元素

jsFiddle：https://jsfiddle.net/x6m7qnyp/

.container {
  display: flex;
  flex-wrap: wrap;
}

.left {
  flex: 15%;
  background-color: rgb(255, 0, 0);
  height: 150px;
}

.rightTop {
  flex: 85%;
  background-color: rgb(0, 255, 0);
  align-self: flex-start;
}

.rightBottom {
  flex: 85%;
  background-color: rgb(0, 0, 255);
}

<div class="container">
  <div class="left">
    LEFT
  </div>
  <div class="rightTop">RIGHT TOP</div>
  <div class="rightBottom">RIGHT BOTTOM</div>
</div>  

正如您所看到的，即使我将flex设置为85％，最后一个元素也会在.left div下面。

我想要的是让右下方元素填充右上方元素下的剩余空间。它应该是这样的：

我知道我可以通过使用容器包装右上角和右下角元素来实现此目的，但我想知道是否有办法使用当前标记执行此操作。 而且，你能解释为什么正确的底部元素下降而不是填充剩余的空间吗？

Answer 1

将右上角和右上角div包裹在容器中。

.container {
  display: flex;
  flex-wrap: wrap;
}

.left {
  flex: 15%;
  background-color: rgb(255, 0, 0);
 width:15px;
  flex-grow:0;
}

.rightTop {
  background-color: rgb(0, 255, 0);
  align-self: flex-start;
}

.rightBottom {
  background-color: rgb(0, 0, 255);
  height: 100px;
}

<div class="container">
  <div class="left">
    LEFT
  </div>
  <div>
   <div class="rightTop">RIGHT TOP</div>
  <div class="rightBottom">RIGHT BOTTOM
  </div>
</div>
</div> 

Answer 2

我会在flex column

中添加正确的行

.flex {
  display: flex;
}

.left {
  flex-basis: 15%;
  background-color: rgb(255, 0, 0);
  height: 150px;
}

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

.rightTop {
  background-color: rgb(0, 255, 0);
}

.rightBottom {
  background-color: rgb(0, 0, 255);
  flex-grow: 1;
}

<div class="flex">
  <div class="left">
    LEFT
  </div>
  <div class="flex right">
    <div class="rightTop">RIGHT TOP</div>
    <div class="rightBottom">RIGHT BOTTOM</div>
  </div>
</div>

Answer 3

嘿我只是将右侧包裹在它自己的容器中，名为.right并从那里开始。我也改变了.rightTop和.rightBottom的高度来匹配。

<强> HTML

<div class="container">
  <div class="left">
    LEFT
  </div>
  <div class="right">
  <div class="rightTop">RIGHT TOP</div>
  <div class="rightBottom">RIGHT BOTTOM</div>
    </div>
</div> 

<强> CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.left {
  flex: 15%;
  background-color: rgb(255, 0, 0);
  height: 150px;
}

.right {
  flex: 85%;
}

.rightTop {
  height: 20px;
  background-color: rgb(0, 255, 0);
  align-self: flex-start;
}

.rightBottom {
  background-color: rgb(0, 0, 255);
  height: 130px;
}

Codepen示例：https://codepen.io/StefanBobrowski/pen/bqyQWJ