html - 当空间可用时将元素一个接一个地添加到另一个 Flexbox

Question

我有以下问题，我有在 flex-wrap 内输入的表单，但在少数表单中我有 <textarea rows="5"></textarea>它需要比输入字段更高的高度。是否可以在 flex-wrap 中有以下结构:

这 2 个输入字段是否一个位于另一个下方，但位于它们的 .holder div 中？

https://jsfiddle.net/by06rreq/

CSS: 
.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.holder {
  width: 30%;
}

input, textarea {
  width: 100%;
}

.holder.textarea {
  width: 65%;
}

HTML: 

<div class="flex">
  <div class="holder textarea">
      <textarea name="test" rows="5"></textarea>
  </div>
  <div class="holder">
    <input type="text">
  </div>
  <div class="holder">
    <input type="text">
  </div>
</div>

Answer 1

你可以看到.. 你想要这样吗。我尝试过使用多布局 css。通过 column-count

.flex {
  column-count: 2;
  column-gap: 0;
}

.holder {
  width: 50%;
  margin-bottom: 15px;
}

input, textarea {
  width: 100%;
}

.holder.textarea {
  width: 65%;
  margin-bottom: 0;
}

<div class="flex">
  <div class="holder textarea">
      <textarea name="test" rows="5"></textarea>
  </div>
  <div class="holder">
    <input type="text">
  </div>
  <div class="holder">
    <input type="text">
  </div>
</div>