bootstrap 3 input-group 100% width - html

Question

In the bootstrap documentation, they have input groups that span 100% width with no additional markup: http://getbootstrap.com/components/#input-groups
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
I can't seem to get my input groups to span 100% without explicitly defining width: 100% on input-group. Note that I've slightly adjusted the markup:
<div class="input-group">
<input class="form-control" placeholder="Auto width" />
<div class="clear">
</div>
</div>
CSS:
.clear { display: table-cell; }
I've created a fiddle to represent this problem: http://jsfiddle.net/Wexcode/B9LMN/

Answer 1

Adding width: 1% to the input element's sibling fixes this:
.clear { width: 1%; display: table-cell; }
See http://jsfiddle.net/Wexcode/B9LMN/2/

Answer 2

input-group has display: table css property, while the <input class="form-control" has display: table-cell css property.
<div class="input-group"> <!-- this is display: table -->
<input type="text" class="form-control"> <!-- this is display: table-cell -->
<span class="input-group-addon">.00</span> <!-- this is display: table-cell -->
</div>
According to HERE, under "Important Style Rules for Tables",
Width works on table cells just about how you would think it does, except when there is
some kind of conflict. For instance if you tell the table itself to be 400px wide then the
first cell of a three-cell row to be 100px wide and leave the others alone, that first cell
will be 100px wide and the other two will split up the remaining space.
it explains that if the width of the child element that has table-cell is defined (let's say width: 100px), then the next child element with table-cell property, although not defined, will fill in the rest of the space.

Answer 3

One way to get an input-group to stretch to full width seem to give one of its input-group-addon 100% width:
<div class="input-group" style="width:100%;">
<span class="one input-group-addon">one</span>
<span class="two input-group-addon">two</span>
<span class="tre input-group-addon" style="width:100%">tre</span> <!-- here -->
<span class="for input-group-addon">for</span>
<span class="fiv input-group-addon">fiv</span>
<span class="input-group-btn">
<button class="btn" type="button">x</button>
</span>
</div>

Answer 4

<div class="container">
<h3>Form widths</h3>
<form role="form">
<div class="form-group">
<label>Auto width</label>
<div class="input-group">
<input class="form-control" placeholder="Auto width" /> <span class=
"input-group-addon"></span>
</div>
</div>
<div class="form-group">
<label>100% width</label>
<div class="input-group" style="width: 100%">
<input class="form-control" placeholder="100% width" /> <span class=
"input-group-addon"></span>
</div>
</div>
</form>
</div>

Answer 5

If you have select2 as a part of your "input-group", you better create it with "resolve" parameter:
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});