入力グループの高さを列と同じにする

Question

2行（col-md-6）のフォームがあります。左側にはいくつかのフィールドがあり、右側には1つのテキストエリアしかありません。

私がやりたかったのは、テキストエリアを他のすべてのフィールドと同じ高さにすることでした。 display: flex;を列に設定すると、トウcol-md-6の高さが同じになり、input-groupにheight: 100%を追加すると、これは簡単に可能だと思いましたが、残念ながら私は間違っていました。入力は完全な高さに拡張されません。

<div class="row" style="display: flex;"> 

    <div class="col-md-6"> 
    <div class="input-group"> 
     <div class="input-group-addon">Input 1:</div> 
     <input type="text" class="form-control"></textarea> 
    </div> 
    <div class="input-group"> 
     <div class="input-group-addon">Input 2:</div> 
     <input type="text" class="form-control"></textarea> 
    </div> 
    <div class="input-group"> 
     <div class="input-group-addon">Input 3:</div> 
     <input type="text" class="form-control"></textarea> 
    </div> 
    </div> 

    <div class="col-md-6"> 
    <div class="input-group" style="height: 100%;"> 
     <div class="input-group-addon">Textarea:</div> 
     <textarea class="form-control" style="height: 100%"></textarea> 
    </div> 
    </div> 

</div> 

が、私はインラインstackoverflowの上でここにコードを減らすためにスタイルを追加しました：

は、ここに私のHTMLコードです。

もう一度同じ高さに2つの列を取得できますが、テキスト領域の高さを100％に設定できません。

これがどのように機能するかは誰にも分かりますか？可能であればJavaScriptなし！

Answer 1

textarea { 
 
    height: 100%; 
 
}

<div class="row" style="display: flex;"> 
 

 
    <div class="col-md-6"> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon">Input 1:</div> 
 
     <input type="text" class="form-control"> 
 
    </div> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon">Input 2:</div> 
 
     <input type="text" class="form-control"> 
 
    </div> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon">Input 3:</div> 
 
     <input type="text" class="form-control"> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
    <div class="input-group" style="height: 100%;"> 
 
     <div class="input-group-addon">Textarea:</div> 
 
     <textarea class="form-control"></textarea> 
 
    </div> 
 
    </div> 
 

 
</div>