使輸入組的高度與列的高度相同

Question

我的表格有兩行（col-md-6）。在左側有一些字段，右側只有一個文本區域。

現在我想要做的就是使textarea與所有其他領域一樣高度在一起。 我認爲這將很容易設置display: flex;行，以便拖動col-md-6的高度相同，然後將height: 100%添加到input-group，但不幸的是我錯了。輸入不會擴展到全高。

這裏是我的HTML代碼：

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

我添加的樣式內嵌在這裏減少對計算器的代碼。

所以再次，我可以得到兩列相同的高度，但我無法將textarea的高度設置爲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>