利用可能なスペースがあるときにアイテムを1つずつ追加Flexbox

Question

私は以下の問題を抱えています。フレックスラップ内の入力がありますが、いくつかのフォームでは<textarea rows="5"></textarea>があり、入力フィールドよりも高さが高くなります。フレックスラップの内側に次の構造を持たせることは可能ですか？

これらの2つの入力フィールドを上下に1つずつ持ちます。

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

私はあなたが私の答えに推測を作るするオプションを持っていないので、私が原因評判の欠如にコメントすることはできません&を求めているものを100％わかりません。

これと同様のレイアウトをご希望ですか？

-TextArea- 
-Input- 
-Input- 

あなたの.holderクラスにdisplay: blockとwidth: 100%を適用し、その関連するCSSクラスを通して、あなたの入力コントロールのサイズを調整することができます。

私は完全にあなたが達成しようとしているものを誤解している場合は、単にコメントし、私はさらにあなたを助けることができるかどうか:)

EDIT私が表示されます：

を私ができるあなたの最近のコメントを読んだ後別の解決策を提示する。しかし、flexを使用していません。あなたが見ることができる

.block { 
 
    width: 100%: 
 
    display: block; 
 
} 
 

 
.textarea { 
 
    display: inline-block; 
 
    width: 30%; 
 
} 
 

 
.textarea textarea { 
 
    width: 100%; 
 
} 
 

 
.holder { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.holder input { 
 
    display: block; 
 
    vertical-align: top; 
 
}

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

Answer 2

..あなたは、このようにしたいです。私は複数のレイアウトCSSで試してみました。

.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>