_modal.scss in bootstrap-5.0.0.alpha2

- old
+ new

@@ -54,13 +54,14 @@
     transform: $modal-scale-transform;
   }
 }
 
 .modal-dialog-scrollable {
-  max-height: subtract(100%, $modal-dialog-margin * 2);
+  height: subtract(100%, $modal-dialog-margin * 2);
 
   .modal-content {
+    max-height: 100%;
     overflow: hidden;
   }
 
   .modal-body {
     overflow-y: auto;
@@ -109,20 +110,19 @@
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
   display: flex;
   flex-shrink: 0;
-  align-items: flex-start; // so the close btn always stays on the upper right corner
+  align-items: center;
   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: $modal-header-padding;
   border-bottom: $modal-header-border-width solid $modal-header-border-color;
   @include border-top-radius($modal-content-inner-border-radius);
 
-  .close {
-    padding: $modal-header-padding;
-    // auto on the left force icon to the right even when there is no .modal-title
-    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
+  .btn-close {
+    padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
+    margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
   }
 }
 
 // Title text within header
 .modal-title {
@@ -175,10 +175,10 @@
     max-width: $modal-md;
     margin: $modal-dialog-margin-y-sm-up auto;
   }
 
   .modal-dialog-scrollable {
-    max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
+    height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
   }
 
   .modal-dialog-centered {
     min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
   }