Bootstrap flex making the div overflow - html

Question

I am using Bootstrap 4. I am facing an odd issue. I am adding the html using the jquery. The div has call .col-md-9 d-flex. When the other div's are appened to main div (under parent col-md-9) one it overflows and takes whole page (width) and over ride the other div (col-md-3). The code is given as
<div class="container-fluid">
<div class="row">
<div class="col-md-9 filters-div d-flex"><!-- the dynamic code will append to this div-->
<div class="col-md-2 col-xs-6">
<div class="form-group">
<label>Date and time range:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-clock"></i></span>
</div>
<input type="text" id="reservationdate" class="form-control float-right datetimepicker-input" data-toggle="datetimepicker" data-target="#reservationdate">
</div>
<!-- /.input group -->
</div>
<!-- /.form group -->
</div>
</div>
<div class="col-md-3 d-flex">
<div class="my-div">
<a href="javascript:void(0)" data-toggle="modal" data-target="#modal-default">
<i class="fas fa-filter"></i>Add Filters
</a>
Cancel
Submit
</div>
</div>
</div>
</div>
The jquery which produces the dom element is as follows
$(document).delegate(".add-filter","click",function(){
$val=$("#filter-add").val();
$text=$('#filter-add option:selected').text();
$new_text=$text.replace(/ /g, "-");
$html="<div class='col-md-2 col-xs-6 delete-all' id='"+$new_text+"'><div class='form-group'>";
$html+="<label>"+$text+":</label>";
$html+="<div class='input-group'>";
$html+="<input type='text' class='form-control float-right'><div class='input-group-prepend'><span class='input-group-text delete-filter' data-text='"+$text+"' data-value='"+$val+"'><i class='fas fa-trash'></i></span> </div></div>";
$html+="</div></div>";
$(".filters-div").append($html);
$("#filter-add option:selected").remove();
$('#filter-add').prop('selectedIndex',0);
});
Do let me know whats the issue. The example is here
UPDATE:
The screenshot is attached as follows

Answer 1

You can use flex-wrap to your div:
<div class="col-md-9 filters-div d-flex flex-wrap"><!-- the dynamic code will append to this div-->
Instead, if you don't want to wrap you can reduce the max-width of col-md-2:
.col-md-2 {
max-width: 12% !important;
}
Your issue is up to col-md-2: when you have much of them you get the problem.