Bootstrap zoom in/out problem

by sachid

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="col-md-12" style="display: table; height:100%;">
                        <div class="col-md-4" id="prod-list" style="height: inherit;
            overflow: scroll;
            border: 1px solid #ccc;
            padding: 10px;">
                           
                            <ol id="selectable">
                                
                                <li class="ui-widget-content" >name 1
                                </li>
                               <li class="ui-widget-content">name 1
                                </li>
                                <li class="ui-widget-content" >name 1
                                </li>
                               <li class="ui-widget-content">name 1
                                </li>
                                <li class="ui-widget-content" >name 1
                                </li>
                               <li class="ui-widget-content">name 1
                                </li>
                                <li class="ui-widget-content" >name 1
                                </li>
                               <li class="ui-widget-content">name 1
                                </li>
                                <li class="ui-widget-content" >name 1
                                </li>
                               <li class="ui-widget-content">name 1
                                </li>
                                <li class="ui-widget-content" >name 1
                                </li>
                               <li class="ui-widget-content">name 1
                                </li>
                                <li class="ui-widget-content" >name 1
                                </li>
                               <li class="ui-widget-content">name 1
                                </li>
                        ...