divの幅をコンテンツに合うようにする方法と、次のdivで残りの部分を満たす方法はありますか？

Question

私はinput[type=text]のdivをInputDivMainの残りのスペースの全幅に合わせようとしています。私はInputDivTitle divをコンテンツの幅だけにする方法を知りません。コンテンツの幅のみをフィッティングした後、InputDivに残りのギャップを埋めるようにして、その内側の入力をそのdivの100％にします。

これが私のHTMLです：

<div class='Segment'> 
    <div class='DisplayTable InputDivMain' id='MainDiv_01'> 
    <div class='DisplayTableCell InputDivTitle'>Search by ID</div> 
    <div class='DisplayTableCell InputDiv'> 
     <input class='w3-input' type='text'> 
    </div> 
    </div> 
    <div> 
    <input type="button" value="Search"> 
    </div> 
</div> 
<div class='Segment'> 
    <div class='DisplayTable InputDivMain' id='MainDiv_02'> 
    <div class='DisplayTableCell InputDivTitle'>Search by Number</div> 
    <div class='DisplayTableCell InputDiv'> 
     <input class='w3-input' type='text'> 
    </div> 
    </div> 
    <div> 
    <input type="button" value="Search"> 
    </div> 
</div> 

そして、これは私のCSSです：

.DisplayInline { 
    display: inline-block; 
} 

.DisplayTableCell { 
    display: table-cell; 
    vertical-align: middle; 
} 

.DisplayTable { 
    display: table; 
} 

.Segment { 
    margin-bottom: 20px; 
} 

.InputDivMain { 
    box-sizing: border-box; 
    margin-bottom: 5px; 
    border-bottom: 1px solid #009688; 
    display: table; 
    width: 100%; 
} 

.InputDivMain:hover { 
    cursor: text; 
} 


.InputDiv { 
    overflow: auto; 
    border: 1px solid red; 
    width: auto; 
    box-sizing: border-box; 
} 

.InputDiv > input[type=text] { 
    border-bottom: 0px; 
    width: 100%; 
} 

.InputDiv > input[type="text"]:focus { 
    outline: none; 
} 

.InputDivTitle { 
    box-sizing: border-box; 
    border: 1px solid green; 
    color: #009688; 
    font-size: 120%; 
    padding-left: 5px; 

} 

input[type="button"] { 
    width: 100%;; 
} 

助けてください！

編集：申し訳ありませんが、私はJSFiddleリンクを追加することを完全に忘れました。 https://jsfiddle.net/ytsvzyc6/

Answer 1

あなたはfloat要素が唯一そのコンテンツを占めるように
overflow: hidden;が

.InputDivTitle{ 
    float: left; 
} 
.InputDiv{ 
    position: relative; 
    overflow: hidden; 
} 

see JSFiddle残りのスペースを占有するために、次の内容を起こす原因となる

を置く必要があります

Answer 2

内部コンテンツに対してタイトにしたいdivの表示をインラインブロックに設定できます。

display: inline-block 

How to make div not larger than its contents?