Bootstrap is a familiar tool for me, but I'm fairly new to flexbox css.
In my bootstrap modal, I typically have a header, body, and footer. I'm trying to modify the model-body class so that if the content exceeds a certain size, it becomes scrollable, while keeping the model-header and model-footer fixed in position. I've considered using flexbox css, but I'm unsure of its functionality. Below are the flexbox css properties I've used:
Template:
<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;
}
I've set the model-content to be the maximum viewport height minus 60 pixels. This setup works well except in IE, where the content spills over and doesn't hide properly. If anyone has suggestions or comments on how to address this issue, I would greatly appreciate it!