Expand input to take remaining width

Question

This question is an extension of Expand a div to take the remaining width.

The top solution works great for having a div take up the remaining width, but one I place an input in the left div it breaks. My expectation is that the input would expand to fill the remaining width of the div but instead it jumps out of the div and is placed in the bottom.

Note the red box correctly fills the width while the blue box is a fixed with. I need an input box to be doing the same as the red box: fill the remaining width.

http://jsfiddle.net/fct87qpn/

<div class="container">
    <div class="right"></div>
    <div class="left">
        <input type="text" class="text"/>
    </div>
</div>

score 1 · Accepted Answer · answered Sep 29 '14 at 18:56

1

The solution is already in your provided link:

.left {
    overflow: hidden;
}

JSFiddle

Another solution would be to add a margin:

.left {
    margin-right: 200px;
}

The first one is more flexible, though.

answered Sep 29 '14 at 18:56

Darek Kay

15,827
7
64
61

I think i like the margin-right better. I see what you mean by the flexibility, but with the margin-right the right side of the input box border isn't cut off by the overflow hidden. I could add a border around the div but that seems like a hack – coder Sep 29 '14 at 19:32

score 0 · Answer 2 · answered Sep 29 '14 at 19:01

.container {
    position:relative;
    width:100%;
    height:200px;
    border:1px solid;
}
.right {
    height:200px;
    width:200px;
    background:green;
    float:right;
}
.left {
    width:-webkit-calc(100% - 200px);
    height:178px;
    background:red;
}
.text{
    position:relative;
    width:100%;
    height:20px;
    margin:0;
    border:0;
    top:178px;
}

<div class="container">
    <div class="right"></div>
    <div class="left">
        <input type="text" class="text"/>
    </div>
</div>

Expand input to take remaining width

2 Answers2

Linked