change bootstrap modal-body content для прокрутки

Question

Я использовал bootstrap, но вроде нового для flexbox css.

У меня есть мой bootstrap modal, который обычно имеет заголовок, тело и нижний колонтитул. Я хочу изменить класс model-body таким образом, что если содержимое слишком велико, оно будет прокручиваться, сохраняя заголовок модели и верхний колонтитул модели в фиксированном положении. Я думал об использовании flexbox css, но я не уверен, как это работает. Я использовал ниже свойства Flexbox CSS

шаблона:

<div class="modal-header"> 
    <!-- contents.. --> 
</div> 
<div class="modal-body"> 
    <!-- contents.. --> 
</div> 
<div class="modal-footer"> 
    <!-- contents.. --> 
</div> 

CSS:

.modal-content { 
display: flex; 
flex-direction: column; 
max-height: calc(100vh - 60px); 
} 

.modal-body { 
    overflow: auto; 
} 

.modal-header, .modal-footer { 
flex-grow: 1; 
flex-shrink: 0; 
flex-basis: auto; 
} 

Я даю модельную содержание как высота максимального видового экрана - 60px. Это отлично работает, за исключением IE. Содержание видно и переполнено. Я не знаю, как лучше всего исправить это

Любые предложения, комментарии будут оценены ребятами!

Answer 1

Это было простое исправление, необходимо добавить max-height: calc(100vh - 60px); к modal-content селектором, удалить его и добавить его в modal-body селектор

CSS

.modal-content { 
    display: flex; 
    flex-direction: column; 
} 
.modal-body { 
    overflow: auto; 
    max-height: calc(100vh - 60px); 
} 
.modal-header, .modal-footer { 
    flex-grow: 1; 
    flex-shrink: 0; 
    flex-basis: auto; 
} 

Модальные

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       This Is header 
      </div> 
      <div class="modal-body"> 
       This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content 
      </div> 
      <div class="modal-footer"> 
       This is footer 
      </div> 
     </div> 
    </div> 
</div> 

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

Fiddle Tested in IE-10