内容溢出bootstrap模态

Question

我的bootstrap模式有问题。我想把一张地图显示在模态的左侧，路由信息显示在右侧。地图工作正常，但路由信息溢出模态。我的模态代码如下：

 function displayRoute() {
            var map2Prop = {
                center: new google.maps.LatLng(-37.8142, 144.9632),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var mapRouting = new google.maps.Map(document.getElementById("maprouting"), map2Prop);
            $('#myModal').on('shown.bs.modal', function () {
                displayRoute();
            });
            /* ----------- for routing ---------- */
            directionsDisplay.setMap(mapRouting);
            directionsDisplay.setPanel(document.getElementById("directions"));
            calculateAndDisplayRoute(directionsService, directionsDisplay);
            document.getElementById('mode').addEventListener('change', function () {
                calculateAndDisplayRoute(directionsService, directionsDisplay);
            });
            /* ----------- for routing below----- */
        }
        // Direction
        function calculateAndDisplayRoute(directionsService, directionsDisplay) {

            var selectedMode = document.getElementById('mode').value;
            directionsService.route({
                origin: {lat: currentLat, lng: currentLng},
                destination: {lat: destnLat, lng: destnLng},
                travelMode: google.maps.TravelMode[selectedMode]
            }, function (response, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                } else {
                    alert("Directions request failed due to " + status);
                }
            });
        }
        //Remove space
        function trim(str) {
            return str.replace(/(^\s+)|(\s+$)/g, "");
        }
    </script>
    <div class="container">
        <div class="col-lg-12">
            <div id="gPMap" style="width:100%;height:500px;"></div>
        </div>
        <div class="col-lg-12">
            <div>Suburb:</div>
            <input type="text" id="suburbInput" value="clayton"></input><br>
            <div>Language:</div>
            <input type="text" id = "languageInput"></input><br>
            <button onclick="showGPs()">Show GPs</button>
        </div>
    </div>
     <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6">
                                <div id="maprouting" style="width:400px;height:400px;"></div>
                            </div>
                            <div class="col-sm-6">
                                <div id="directions">
                                    <b>Mode of Travel: </b>
                                    <select id="mode">
                                        <option value="DRIVING">Driving</option>
                                        <option value="WALKING">Walking</option>
                                        <option value="BICYCLING">Bicycling</option>
                                        <option value="TRANSIT">Transit</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

结果是这样的： screenshot 需要帮助，请提前感谢。