Flex-Box too big - css

Question

I made flex-box because I need to have two elements side by side and one bellow.
But the flex-box is much bigger than the content in it, is this normal? What can I do for it?
Here is the code of the container:
<div style="display:flex;float:left;flex-wrap:wrap">
<div style="">
<div class="row-fluid big fixedWidth100">
<div class="span12">
<label for="id30ac3799c3efce50_Operator" title="OP">OP</label>
<select class="" data-init-classnames="" id="id30ac3799c3efce50_Operator" name="Operator" onchange="" title="OP" value="AND">
<option class="" selected="true" title="" value="AND">AND</option>
<option class="" title="" value="ANDNOT">AND NOT</option>
<option class="" title="" value="OR">OR</option>
<option class="" title="" value="ORNOT">OR NOT</option>
</select>
</div>
</div>
</div>
<div style="">
<div class="row-fluid big fixedWidth100">
<div class="span12">
<label for="id883418d93fa3ce50_OpenBrace" title=".(.">.(.</label><input id="id883418d93fa3ce50_OpenBrace" maxlength="10" name="OpenBrace" readonly="readonly" title=".(." type="text" value="">
<div class="span12" id="openBracePlusMinus">
<table>
<tbody>
<tr>
<td>
<input type="button" value="-" class="qtyminusopen" style="width: 43px;">
</td>
<td>
<input type="button" value="+" class="qtyplusopen" style="width: 43px;">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div style="flex-basis:100%;height:0" class="clear"></div>
<div id="InputRange">
<div class="row-fluid width100pct" style="width:100%">
<div class="span4"><label for="idd52f75e7a6d1a650_InputRange" title="Wertebereich">Wertebereich</label></div>
<div class="span8"><input id="idd52f75e7a6d1a650_InputRange" name="InputRange" onclick="" title="Wertebereich" type="checkbox" value="false"></div>
</div>
</div>

Answer 1

This is pretty standard behavior for flexboxes. That is just the width of the container and the children within. The purple resembles the container width. So if you set the container to 100% you would see the purple from your image run the whole width. Or if you justify-content: center; on your flexbox you will see that the purple is then spaced out evenly. Like here.
What can you do?
You can use flex: 1; on each of the children to the parent container that is flexed. This allows for those elements to fill that space. It depends on the extent of what you're trying to do but you can also set a fixed width which will elminate that spacing also.
.container {
display: flex;
float: left;
flex-wrap: wrap;
}
.example {
flex: 1;
}
#InputRange {
flex: 1;
}
<div class="container">
<div class="example">
<div class="row-fluid big fixedWidth100">
<div class="span12">
<label for="id30ac3799c3efce50_Operator" title="OP">OP</label>
<select class="" data-init-classnames="" id="id30ac3799c3efce50_Operator" name="Operator" onchange="" title="OP" value="AND">
<option class="" selected="true" title="" value="AND">AND</option>
<option class="" title="" value="ANDNOT">AND NOT</option>
<option class="" title="" value="OR">OR</option>
<option class="" title="" value="ORNOT">OR NOT</option>
</select>
</div>
</div>
</div>
<div style="">
<div class="row-fluid big fixedWidth100">
<div class="span12">
<label for="id883418d93fa3ce50_OpenBrace" title=".(.">.(.</label><input id="id883418d93fa3ce50_OpenBrace" maxlength="10" name="OpenBrace" readonly="readonly" title=".(." type="text" value="">
<div class="span12" id="openBracePlusMinus">
<table>
<tbody>
<tr>
<td>
<input type="button" value="-" class="qtyminusopen" style="width: 43px;">
</td>
<td>
<input type="button" value="+" class="qtyplusopen" style="width: 43px;">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div style="flex-basis:100%;height:0" class="clear"></div>
<div id="InputRange">
<div class="row-fluid width100pct" style="width:100%">
<div class="span4"><label for="idd52f75e7a6d1a650_InputRange" title="Wertebereich">Wertebereich</label></div>
<div class="span8"><input id="idd52f75e7a6d1a650_InputRange" name="InputRange" onclick="" title="Wertebereich" type="checkbox" value="false"></div>
</div>
</div>
EDIT: To achieve your initial spacing take flex: 1; off your example class. But doing this will make the purple (unoccupied space) resurface. But it does fill the #InputRange ID