次の入力領域を画面の最後まで拡張するにはどうすればよいですか？

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 
} 

：

は、私が欲しいの入力最初の行と3行目のchはコンテナdivの終わりです（neigbhorと水平に積み重ねないようにします）。

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

しかし、何も移動：

は、私はこれを試してみました。

これを行う正しい方法は何ですか？

Answer 1

このフィドルをチェックしてください - これはあなたが進めていることですか？ 1）入力要素の後に余分な閉じ括弧 2）.row-グループ 3）を加えた後、行方不明ブラケット：

.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でいくつかの問題を修正：ここ https://jsfiddle.net/jspruance/1p739t1h/

は修正CSSです'width：100％'プロパティと 'box-sizing：border-box' 4）浮動ラベルが残っています。 5）.rowで 'display：flex'をコメントアウトしました（不要）

希望します。