Css 将引导模式正文内容更改为可滚动

我使用过引导，但对flexbox css来说是新的

我有我的引导模式，通常有页眉，正文和页脚。我想以这样一种方式更改模型主体类：若内容太大，那个么它将是可滚动的，保持模型页眉和模型页脚在固定位置。我曾想过使用flexbox css，但我不确定它是如何工作的。我使用了以下flexbox css属性

模板：

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

我将模型内容设置为最大视口高度-60px。除了IE中的内容是可见的和溢出的外，这一切都很好。我不知道最好的解决办法

---

任何建议、评论都将受到欢迎

这是一个简单的修复，您添加了

最大高度：calc（100vh-60px）至
模态内容
选择器，将其删除并添加至
模态正文
选择器

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;
}

.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>