prevent modal-inner-content margins from unexpectedly collapsing with parent

src/components/modal/base/modal-inner-content.jsx

@@ -8,13 +8,15 @@ const ModalInnerContent = ({
     children,
     className
 }) => (
-    <div
-        className={classNames(
-            'modal-inner-content',
-            className
-        )}
-    >
-        {children}
+    <div className="modal-inner-clear">
+        <div
+            className={classNames(
+                'modal-inner-content',
+                className
+            )}
+        >
+            {children}
+        </div>
     </div>
 );
 

src/components/modal/base/modal-inner-content.scss

@@ -1,7 +1,15 @@
 @import "../../../colors";
 @import "../../../frameless";
 
-.modal-inner-content { /* content inside of content */
+/*
+necessary to prevent modal-inner-content's margins from
+unexpectedly collapsing with a parent
+*/
+.modal-inner-clear {
+    overflow: auto;
+}
+
+.modal-inner-content {
     box-sizing: border-box;
     display: flex;
     border-radius: 0;