Here is the solution:
- Add a
<div style="clear:left;margin-top:22px"></div>
before the.last
element* - Add
margin-top: -22px;
to.last
where the amount is about the same as the line-height - If you dont want it to get too small add
min-width
to.last
and it will work as you’d expect
Alsomin-width: 1px;
is requiered in the class to avoid it getting 0 in special cases.
Tested and working in IE8+, Edge, Chrome, Opera, Firefox
* { box-sizing: border-box; }
.container {
width: 300px;
background: snow;
padding: 5px;
overflow: auto;
}
.element {
float: left;
margin: 2px 5px 2px 0;
background: lavender;
}
.last {
overflow: hidden;
margin-top: -22px;
min-width: 1px;
}
.last > input {
width: 100%;
}
.container .unwrap {
clear: left;
margin-top: 22px
}
<div class="container">
<div class="unwrap"></div>
<div class="last"><input type="text" /></div>
</div>
<div class="container">
<div class="element">Foo</div>
<div class="element">Foo bar</div>
<div class="element">Foo bar baz</div>
<div class="unwrap"></div>
<div class="last"><input type="text" /></div>
</div>
<div class="container">
<div class="element">Foo</div>
<div class="element">Foo bar</div>
<div class="element">Foo bar baz boo</div>
<div class="unwrap"></div>
<div class="last" style="min-width: 100px">
<input type="text" placeholder="min-width 100px" />
</div>
</div>
<div class="container">
<div class="element">Foo</div>
<div class="element">Foo bar</div>
<div class="element">Foo bar baz</div>
<div class="element">Foo</div>
<div class="element">Foo bar</div>
<div class="element">Foo bar baz</div>
<div class="unwrap"></div>
<div class="last"><input type="text" /></div>
</div>
<div class="container">
<div class="element">Foo</div>
<div class="element">Foo bar</div>
<div class="element">Foo bar baz</div>
<div class="element">Foo baaaaaaaaaaaaaaaaaaaaaaar</div>
<div class="unwrap"></div>
<div class="last"><input type="text" /></div>
</div>
<div class="container">
<div class="element">Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz</div>
<div class="unwrap"></div>
<div class="last"><input type="text" /></div>
</div>
* margin-top:22px
only to avoid the input to slip over in case there are no elements in the container. It should be the absolute value of the negative margin of the input