html - 你能做一个尽可能小但尽可能宽的嵌套列 flexbox 吗？

Question

在下面的代码片段中，我有两个 flexbox 容器:一个是主容器，包装行，另一个是嵌套在第一个容器中，具有列方向。

我想像这样显示红色、绿色和蓝色容器:

--------------
red   | black
--------------
green | gray
--------------
blue  | 
--------------

而不是像这样简单地堆叠:

--------
red
--------
green
--------
blue
--------
black
--------
gray
--------

这是一种可能的行为吗？谢谢!

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

.flexbox-element {
  flex: 1 1 auto;
}

.flexbox-column {
  flex-direction: column;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.violet {
  background-color: violet;
}

.black {
  background-color: black;
}

.gray {
  background-color: gray;
}

.flexbox-element {
  width: 200px;
  min-height: 200px;
}

<div class="flexbox" style="flex: 1; width: 500px">
  <div class="flexbox flexbox-element flexbox-column" style="flex: 1 1 100%">
    <div class="flexbox-element red"></div>
    <div class="flexbox-element green"></div>
    <div class="flexbox-element blue"></div>
    <div class="flexbox-element black"></div>
    <div class="flexbox-element gray"></div>
  </div>
  <div class="flexbox-element yellow"></div>
  <div class="flexbox-element orange"></div>
  <div class="flexbox-element violet"></div>
</div>

Answer 1

如果您将 flex-direction: column 和 flex: 1 删除到第一组，您应该会得到想要的结果。

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

.flexbox-column {
  flex-direction: column;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.black {
  background-color: black;
}

.gray {
  background-color: gray;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.violet {
  background-color: violet;
}

.flexbox-element {
  width: 200px;
  min-height: 200px;
}

.flexbox-group {
  width: 400px;
  height: 600px;
  flex-direction: column;
}

<div class="flexbox" style="flex: 1; width: 500px">
  <div class="flexbox flexbox-element flexbox-group">
    <div class="flexbox-element red"></div>
    <div class="flexbox-element green"></div>
    <div class="flexbox-element blue"></div>
    <div class="flexbox-element black"></div>
    <div class="flexbox-element gray"></div>
  </div>
  <div class="flexbox-element yellow"></div>
  <div class="flexbox-element orange"></div>
  <div class="flexbox-element violet"></div>
</div>