Enable flex on the .modal-content, ensure .modal-body stretches the height (if needed)

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 87be3df44e82b22099ecf7fb55596c1b83f4df0a..a1ef18624326c6c78364e4657f0508e7b49ffee0 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -48,6 +48,8 @@
 // Actual modal
 .modal-content {
   position: relative;
+  display: flex;
+  flex-direction: column;
   background-color: $modal-content-bg;
   background-clip: padding-box;
   border: $modal-content-border-width solid $modal-content-border-color;
@@ -94,6 +96,9 @@
 // Where all modal content resides (sibling of .modal-header and .modal-footer)
 .modal-body {
   position: relative;
+  // Enable `flex-grow: 1` so that the body take up as much space as possible
+  // when should there be a fixed height on `.modal-dialog`.
+  flex: 1 1 auto;
   padding: $modal-inner-padding;
 }