How to make an input field occupy 100% of unused space?

Question

I spin my wheel for hours on this little thing. I have a div. In this div, I want two buttons on the right (side by side), and the rest of this line is filled with an input field. I have tried countless combinations of CSS options and I can't figure it out.
I need item1 and item2 to be side by side and occupy the entire width of the parent div. Any ideas from a CSS guru? Thanks!!

http://jsfiddle.net/vasxmg1d/

<div style="width: 50%; border: 1px solid black; height: 300px;">
    <br/>
    <div style="width: 100%">
        <input id="item1" type="text" style="width: 100%"/>
        <div id="item2">
            <button>button1</button>
            <button>button2</button>
        </div>
    </div>
</div>

Answer 1

Modern approach - flexbox

Use flexbox - set the wrapper <div>to display: flexand <input>in flex: 1(efficiently flex-grow: 1):

#wrapper {
    display: flex;
}
#item1 {
    flex:1;
}

http://jsfiddle.net/vasxmg1d/10/

flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

- CSS

, , CSS , HTML ( , )

http://jsfiddle.net/vasxmg1d/12/

<div id="item1">
    <input type="text"/>
</div>

CSS

#wrapper {
    display: table;
}
#item1,#item2 {
    display: table-cell;
    white-space: nowrap;
}
#item1 {
    width: 100%;
}
#item1>input {
    width: 100%;
}

Answer 2

tables

:

<div style="width: 50%; border: 1px solid black; height: 300px;">
    <br/>
    <table style="width: 100%">
        <tr>
        <td width="100%"><input type="text" style="width: 100%;box-sizing:border-box;"/></td>
        <td><button>button1</button><br><button>button2</button></td>
        </tr>
    </table>
</div>

Answer 3

, . , . JS.

http://jsfiddle.net/vasxmg1d/2/

<input id="item1" type="text" style="width: 65%"/>

perctange , .

button{
    float:left;
    width:15%;
}

Answer 4

, float: right. width: calc(100% - x), x - :

input[type=text] {
    width: calc(100% - 122px);
    box-sizing: border-box;
}

, JavaScript:

var buttons = document.querySelector(".buttons");
var input = document.querySelector("input[type=text]");
input.style.width = "calc(100% - " + buttons.offsetWidth + "px)";

.box {
    width: 50%;
    border: 1px solid black;
    height: 300px;
    padding-top: 30px;
}
.buttons {
    float: right;
}
input[type=text] {
    box-sizing: border-box;
}

<div class="box">
    <input type="text"/>
    <div class="buttons">
        <button>button1</button>
        <button>button2</button>
    </div>
</div>

Hide result