Bootstrap datetimepicker not working properly inside scrollable div

I'm working with bootstrap DateTimePicker and there I have a scrollable div and inside which I have my date time picker. and there when I scroll and tries to select dates the date time picker windows opens above the textbox

For better illustration I have the image here

Wonder where I messed up with it?

This is what I have coded.

<script>
    $(function () {
        $('#datetimepicker').datetimepicker({
            minDate:new Date()
          });
        $('#datetimepicker1').datetimepicker({
            useCurrent: false
        });
        $("#datetimepicker").on("dp.change", function (e) {
            $('#datetimepicker1').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker1").on("dp.change", function (e) {
            $('#datetimepicker').data("DateTimePicker").maxDate(e.date);
        });


        $('#radius').bootstrapSlider({
            formatter: function (value) {
                $('#distance').val(value);
                var v = $('#btn-toggle').find('.active').find('input[name="options"]').val();
                console.log('option = ' + v);
                //alert(v);
                radius = $('#radius').val();
                if (v == 'km') {
                    $('#distance').val(radius);
                }
                else {
                    $('#distance').val(radius * 1000);
                }
                return value;
            }
        });

        $('#btn-toggle').click(function () {

            setTimeout(function () {
                var v = $('#btn-toggle').find('.active').find('input[name="options"]').val();

                //alert(v);

                radius = $('#radius').val();
                if (v == 'km') {
                    $('#distance').val(radius);
                }
                else {
                    $('#distance').val(radius * 1000);
                }
            }, 500);
        });

    });
</script>

HTML

<div class="form-group datetimepicker-cover">
      <input type="text" name="start_time" id="datetimepicker" required="required" class="form-control" placeholder="From Date" data-name="start_time"/>
</div>
<div class="form-group datetimepicker-cover">
      <input type="text" name="end_time" id="datetimepicker1" required="required" class="form-control" placeholder="To Date" data-name="end_time"/>
 </div>

Fix this issue by changing the order and need to modify .bootstrap-datetimepicker-widget class like this

.bootstrap-datetimepicker-widget {
  top: auto !important;
  bottom:auto !important;
}

I guess the problem in my case was that it doesn't have enough space to popup even after adding the above fix so when I changed the order the existing problem got fixed by the above fix.

Hope this will help someone. :)