div内の3つのスパン、最も右側のスパンはすべての幅を取る

Question

私はフォームを3 とし、下に1つのテキストエリアがあるようにしたいと思います。それらのすべてはコンテナの中にあります。 2番目の最初の<input>は最小幅と最大幅を持ち、％入力の3番目の入力は最小幅と最大幅を持ちますが最大幅はありません。
第1と第2が最大幅に達するようにウィンドウを大きくすると、第3のものは45％に留まる代わりに100％になり、残りはスペースにとどまります。

HTML：

.container{ 
 
    width: 70%; 
 
    margin: 0px auto; 
 
    padding: 10px; 
 
} 
 
.form{ 
 
    text-align: center; 
 
} 
 
#text{ 
 
    margin-top: 5px; 
 
    width: 95%; 
 
} 
 
#iName{ 
 
    width: 15%; 
 
    min-width: 45px; 
 
    max-width: 70px; 
 
} 
 
#iDate{ 
 
    width: 30%; 
 
    min-width: 120px; 
 
    max-width: 150px; 
 
} 
 
#iTitle{ 
 
    width: 45%; 
 
    min-width: 120px; 
 
}

<div id="container" class="container"> 
 
    <div id="form" class="form"> 
 
    <input id="iDate" value="28/03/2017 13:19"></input> 
 
    <input id="iName" value="Jhon"></input> 
 
    <input id="iTitle" value="My title"></input><br> 
 
    <textarea id="text" rows="4" cols="50"> 
 
    Some Text 
 
    </textarea><br> 
 
    <button id="update">Update</button> 
 
    </div> 
 
    ... 
 
</div>

Answer 1

これはflexboxを使用するのに最適なケースのシナリオです。 https://jsfiddle.net/2nfo8exr/

あなたが見ることができるように、あなたはまだmin-widthとmax-width制限を設定することができますが、それは幅を埋めるためにその第三入力に使用に残りのスペースのすべてを確認します。

また、ご注意くださいinputタグは自己閉鎖であり、</input>は有効なHTMLではないので、必要ありません。

Answer 2

おそらく、これは問題を解決します（私が問題を正しく理解している場合）。ここで

#iTitle { 
    /* 
    where 95% is the width of textarea 
    where 150px + 70px is the max width of the other inputs 
    where -12px is the space (4px * 3) in between div elements 
    */ 
    width: calc(95% - (150px + 70px) - 12px); 
    min-width: 120px; 
} 

Answer 3

純粋なコードは、あなたが

HTML

<div id="container" class="container"> 
<div class="row"> 
    <div id="form" class="form"> 
     <input id="iDate" value="28/03/2017 13:19"> 
     <input id="iName" value="Jhon"> 
     <input id="iTitle" value="My title"><br> 
     <textarea id="text" rows="4">ASfadfasbncaksjb</textarea> 
    <br /> 
    <button id="update">Update</button> 
</div> 

CSS

.container { 
    width: 70%; 
    margin:0 auto; 
} 
.form { 
    text-align: center; 
} 

#text { 
    margin-top: 5px; 
    width: 98%; 
} 
#iName { 
    width: 15%; 
} 
#iDate { 
    width: 40%; 
} 
#iTitle { 
    width: 40%; 
}