如何使下列輸入區域展開直到屏幕結束？

Question

這是自舉狀：

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="form-group row-group"> 
     <label class="col-6">First name</label> 
     <input class="col-6" type="text" value=""></input> 
     </div> 
     <div class="form-group row-group"> 
     <label class="col-6">Last name</label> 
     <input class="col-6" type="text" value=""></input> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group row-group"> 
     <label class="col-4">Message</label> 
     <input class="col-8" type="text" value=""></input> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group row-group"> 
     <label class="col-4">Message</label> 
     <input class="col-12" type="text" value=""></input> 
     </div> 
     <div class="form-group row-group"> 
     <label class="col-4">Message</label> 
     <input class="col-12" type="text" value=""></input> 
     </div> 
     <div class="form-group row-group"> 
     <label class="col-4">Message</label> 
     <input class="col-12" type="text" value=""></input> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-12 row-group"> 
     <button class="btn">Submit</button> 
     </div> 
    </div> 
    </div> 

CSS：

.row { 
    display: flex 
} 

.row-group { 
    display: flex 
    flex-direction: row !important 
    align-items: center 

    label { 
    flex: 0 0 100px 
    } 

    input { 
    flex: 1 
    } 
} 

.form-group { 
    flex: 1 0 0 
    flex-direction: column 
} 

這是結果：

我想要的輸入第一行和第三行對應ch容器div的結尾（不要與neigbhor水平堆疊）。

我嘗試這樣做：

.row-group { 
    input: flex: 1 1 100% 
} 

但沒有什麼動作。

這樣做的正確方法是什麼？

Answer 1

請檢查這個小提琴 - 這是你要去的嗎？ https://jsfiddle.net/jspruance/1p739t1h/

這裏的改性CSS：

.row { 
    xdisplay: flex; 
} 

.row-group { 
    display: flex; 
    flex-direction: row !important; 
    align-items: center; 
} 

    label { 
    flex: 0 0 100px; 
    } 

    input { 
    width: 100%; 
    box-sizing: border-box; 
    flex: 1; 
    } 

.form-group { 
    flex: 1 0 0; 
    flex-direction: column; 
} 

予固定的一些問題與CSS： 1）輸入元件之後額外閉括號 2）後.row基 3）添加了缺少支架'width：100％'property and'box-sizing：border-box' 4）浮動標籤離開。 5）在「.row」上註釋「display：flex」（不需要）

希望這有助於。