Bootstrap, modal max-heigh and max-width dont work

Question

I have a button that opens up a modal that is filled with the content of the div the button was on. I'm trying to have the modal have a max-height and max-width of 90% so if its a map they want to enlarge its going to take the full height and width but if its a couple checkboxes then it will be a lot smaller. The problem im having is that when i set the max-height the modal will still go beyond the bottom of the screen and when i set max-width it will only take like 25% of the center of the screen.

HTML:

                    <div class="ibox-tools hidden-xs"><!--THE BUTTONS FOR THIS DIV THAT ARE HIDDEN WHEN THE SCREEN IS EXTRA SMALL-->
                    <div class="dropdown dropdownView"><!--THE DROPDOWN-->
                        <button class="btn btn-default dropdown-toggle btn-xs btn-purple" type="button" id="dropdownMenuElement" data-toggle="dropdown" aria-expanded="true"><!--DROPDOWN BUTTON-->
                            Views
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuElement"><!--DROPDOWN SELECTIONS-->
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#elementMap">Map</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#elementGrid">Table</a></li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-green btn-xs" data-toggle="modal" data-target="#resetElementModal">Reset All</button><!--RESET BUTTON-->
                    <div class="modal fade" id="resetElementModal" role="dialog"><!--MODAL FOR ELEMENT-->
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header"><!--MODAL TITLE BAR-->
                                    <button type="button" class="close" data-dismiss="modal"><!--CLOSE BUTTON-->
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                    <h4 class="modal-title">Element Map</h4><!--MODAL TITLE-->
                                </div>
                                <div class="modal-body"><!--MODALS CONTENT-->
                                    <p>Are you sure you wish to reset the elements?</p>
                                </div>
                                <div class="modal-footer"><!--MODAL FOOTER WITH CLOSE BUTTON-->
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#enlargeElementModal"><!--BUTTON THAT MAKES THE DIV CONTENT OPEN UP IN A MODAL-->
                        <span class="glyphicon glyphicon-fullscreen"></span>
                    </button>
                    <div class="modal modal-wide fade" id="enlargeElementModal" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                    <h4 class="modal-title">Element Data</h4>
                                </div>
                                <div class="modal-body">
                                    <p></p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="collapse-link"><!--COLLAPSES THE DIV-->
                        <i class="fa fa-chevron-up"></i><!--GLYPHICON-->
                    </a>
                </div>

CSS:

/*ENLARGED MODAL STYLE*/
.modal.modal-wide .modal-dialog {
  max-width: 90%;
  max-height: 90%;
}

.modal-wide .modal-body {
  overflow-y: auto;
  overflow-x: auto;
}

/*ENLARGE BUTTON STYLES*/
#enlargeElementModal, 
#enlargeStrategyModal,
#enlargeVariableModal,
#enlargeTreatmentModal,
#enlargeEfficiencyModal,
#enlargeBudgetModal, 
#enlargeSummaryModal{
  /*transform:scale(1.3);*/
  font-size: 18px;
}

/*ENLARGE MODAL PARAGRAPGH*/
#enlargeElementModal .modal-body p, 
#enlargeStrategyModal .modal-body p,
#enlargeVariableModal .modal-body p,
#enlargeTreatmentModal .modal-body p,
#enlargeEfficiencyModal .modal-body p,
#enlargeBudgetModal .modal-body p, 
#enlargeSummaryModal .modal-body p{
  margin-bottom: 900px
}