Fix IE flexbox bugs (#1552)

### Changes

This PR fixes

- Inconsistent padding across screens after #1547 
![image](https://user-images.githubusercontent.com/941075/48504661-7f7e7880-e82c-11e8-8ec9-5c5292ae1f0b.png)

- IE glitches after we added flexbox in #1539 (the actual issues were: https://github.com/philipwalton/flexbugs#flexbug-3, https://github.com/philipwalton/flexbugs#flexbug-4 and https://github.com/philipwalton/flexbugs#flexbug-6)
![image](https://user-images.githubusercontent.com/941075/48504602-65dd3100-e82c-11e8-9cf0-69980328ebc2.png)

# GIFs (it's not JIF)

## IE 10
![ie10](https://user-images.githubusercontent.com/941075/48504817-cf5d3f80-e82c-11e8-9794-5608a8a5a3ca.gif)

## IE 11
![ie11](https://user-images.githubusercontent.com/941075/48504894-fa479380-e82c-11e8-952a-0344370a433e.gif)

## Edge 17
![edge17](https://user-images.githubusercontent.com/941075/48505076-5b6f6700-e82d-11e8-86be-969287b1cd06.gif)


## Firefox
![firefox](https://user-images.githubusercontent.com/941075/48505083-5f9b8480-e82d-11e8-900c-3ba69e6e2e12.gif)

## Safari
![safari](https://user-images.githubusercontent.com/941075/48505320-ee100600-e82d-11e8-9de2-427ea14b56fd.gif)


## Chrome
![chrome](https://user-images.githubusercontent.com/941075/48505322-ef413300-e82d-11e8-80c5-5acd333c17d6.gif)


## Pixel 2
![pixel2](https://user-images.githubusercontent.com/941075/48505549-7393b600-e82e-11e8-8f30-0081aa36119c.gif)

## Galaxy S9

![galaxys9](https://user-images.githubusercontent.com/941075/48505555-77273d00-e82e-11e8-8406-ec573bb5df88.gif)


## iPhone 7
![iphone7](https://user-images.githubusercontent.com/941075/48505730-e9981d00-e82e-11e8-9dfe-963b526ead83.gif)


## iPhone X
![iphonex](https://user-images.githubusercontent.com/941075/48505736-ebfa7700-e82e-11e8-85c4-bb6fd75fbc04.gif)

Author: luisrudge

css/index.styl

@@ -132,13 +132,12 @@ loadingSize = 30px
 
   .auth0-lock-cred-pane
     background white
-    height: 100%
-    min-height: 100%
-    display: flex
-    flex-direction: column
     border-radius 6px
     position relative
-    white-space: nowrap
+    display: flex;
+    flex-direction: column;
+    height: 100%
+    min-height: 100%
 
     &.horizontal-fade-exit
       .auth0-lock-content, .auth0-lock-terms
@@ -147,8 +146,12 @@ loadingSize = 30px
 
     &.auth0-lock-moving
       overflow hidden
-
-
+  .auth0-lock-cred-pane-internal-wrapper
+    display: flex
+    flex-direction: column
+    height: 100%
+    min-height: 100%
+  
   // Lock header content
 
 
@@ -168,9 +171,8 @@ loadingSize = 30px
     justify-content: center
 
   .auth0-lock-content-wrapper
-    flex: 1
+    flex-grow: 1
     flex-shrink: 0
-    overflow: scroll
 
   .auth0-lock-close-button, .auth0-lock-back-button
     -webkit-box-sizing content-box !important
@@ -311,9 +313,9 @@ loadingSize = 30px
     box-sizing border-box
 
   .auth0-lock-form
-    display initial
     -webkit-animation fadeIn .2s
     animation fadeIn .2s
+    padding 20px
 
     h2
       font-size 22px
@@ -497,6 +499,7 @@ loadingSize = 30px
           width: 38px
 
     .auth0-lock-social-button-icon
+      box-sizing: content-box
       width 40px
       height 40px
       position absolute
@@ -642,9 +645,7 @@ loadingSize = 30px
       transition-duration .5s
 
   .auth0-lock-submit-container
-    flex: 1
     flex-shrink: 0
-    overflow: scroll
 
   .auth0-loading-container
     position relative
@@ -1099,8 +1100,11 @@ loadingSize = 30px
 // database mode
 
 .auth0-lock.auth0-lock
-  .auth0-lock-internal-content-wrapper
-    padding 20px
+  .auth0-lock-tabs-container
+    margin-left -20px
+    margin-right -20px
+    margin-top -20px
+    margin-bottom 20px
   .auth0-lock-tabs
     background white
     padding 0
@@ -1248,6 +1252,7 @@ loadingSize = 30px
   color red
   font-size 12px
   margin-top 5px
+  white-space nowrap
 
   +breakpoint("mobile")
     color black
@@ -1284,7 +1289,7 @@ loadingSize = 30px
 
 .auth0-lock .auth0-loading-screen
   min-height 42px
-  padding 20px
+  box-sizing border-box
   @media screen and (max-width: 480px)
       position absolute
       top "calc(50vh - %s)" % headerHeight

src/__tests__/engine/classic/__snapshots__/login.test.jsx.snap

@@ -7,9 +7,7 @@ exports[`LoginScreen renders LoginPane when SSO is enabled 1`] = `
   >
     ssoEnabled
   </div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="login_pane"
       data-emailInputPlaceholder="emailInputPlaceholder"
@@ -34,9 +32,7 @@ exports[`LoginScreen renders LoginPane when SSO is enabled 1`] = `
 
 exports[`LoginScreen renders LoginPane when has database connection 1`] = `
 <div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="login_pane"
       data-emailInputPlaceholder="emailInputPlaceholder"
@@ -61,9 +57,7 @@ exports[`LoginScreen renders LoginPane when has database connection 1`] = `
 
 exports[`LoginScreen renders LoginPane when has enterprise connection 1`] = `
 <div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="login_pane"
       data-emailInputPlaceholder="emailInputPlaceholder"
@@ -95,9 +89,7 @@ exports[`LoginScreen renders LoginSignUpTabs when database connection is enabled
     data-signUpLabel="signUpLabel"
     data-signUpLink={false}
   />
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="login_pane"
       data-emailInputPlaceholder="emailInputPlaceholder"
@@ -122,9 +114,7 @@ exports[`LoginScreen renders LoginSignUpTabs when database connection is enabled
 
 exports[`LoginScreen renders LoginSignUpTabs when social connection is enabled and has initial screen signUp and has screen signUp 1`] = `
 <div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="login_pane"
       data-emailInputPlaceholder="emailInputPlaceholder"
@@ -154,9 +144,7 @@ exports[`LoginScreen renders SingleSignOnNotice when SSO is enabled 1`] = `
   >
     ssoEnabled
   </div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="login_pane"
       data-emailInputPlaceholder="emailInputPlaceholder"
@@ -181,9 +169,7 @@ exports[`LoginScreen renders SingleSignOnNotice when SSO is enabled 1`] = `
 
 exports[`LoginScreen renders SocialButtonsPane when has social connections 1`] = `
 <div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="social_buttons_pane"
       data-bigButtons={false}
@@ -199,8 +185,6 @@ exports[`LoginScreen renders SocialButtonsPane when has social connections 1`] =
 
 exports[`LoginScreen renders empty div by default 1`] = `
 <div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  />
+  <div />
 </div>
 `;

src/__tests__/engine/classic/__snapshots__/sign_up_screen.test.jsx.snap

@@ -2,9 +2,7 @@
 
 exports[`SignUpScreen disables SocialButtonsPane when terms were not accepted 1`] = `
 <div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="social_buttons_pane"
       data-bigButtons={false}
@@ -26,17 +24,13 @@ exports[`SignUpScreen renders LoginSignUpTabs SSO is disabled and has screen log
     data-loginLabel="loginLabel"
     data-signUpLabel="signUpLabel"
   />
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  />
+  <div />
 </div>
 `;
 
 exports[`SignUpScreen renders SignUpPane when has database connection 1`] = `
 <div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="sign_up_pane"
       data-emailInputPlaceholder="emailInputPlaceholder"
@@ -60,9 +54,7 @@ exports[`SignUpScreen renders SignUpPane when has database connection 1`] = `
 
 exports[`SignUpScreen renders SignUpPane when has enterprise connection 1`] = `
 <div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="sign_up_pane"
       data-emailInputPlaceholder="emailInputPlaceholder"
@@ -91,17 +83,13 @@ exports[`SignUpScreen renders SingleSignOnNotice when SSO is enabled and has scr
   >
     ssoEnabled
   </div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  />
+  <div />
 </div>
 `;
 
 exports[`SignUpScreen renders SocialButtonsPane when has social connections 1`] = `
 <div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  >
+  <div>
     <div
       data-__type="social_buttons_pane"
       data-bigButtons={false}
@@ -117,8 +105,6 @@ exports[`SignUpScreen renders SocialButtonsPane when has social connections 1`]
 
 exports[`SignUpScreen renders empty div by default 1`] = `
 <div>
-  <div
-    className="auth0-lock-internal-content-wrapper"
-  />
+  <div />
 </div>
 `;

src/engine/classic/login.jsx

@@ -99,7 +99,7 @@ const Component = ({ i18n, model }) => {
     <div>
       {ssoNotice}
       {tabs}
-      <div className="auth0-lock-internal-content-wrapper">
+      <div>
         {social}
         {separator}
         {login}

src/engine/classic/sign_up_screen.jsx

@@ -74,7 +74,7 @@ const Component = ({ i18n, model }) => {
     <div>
       {ssoNotice}
       {tabs}
-      <div className="auth0-lock-internal-content-wrapper">
+      <div>
         {social}
         {separator}
         {db}

src/engine/passwordless/social_or_email_login_screen.jsx

@@ -44,7 +44,7 @@ const Component = ({ i18n, model }) => {
   const separator = social && email ? <PaneSeparator /> : null;
 
   return (
-    <div className="auth0-lock-internal-content-wrapper">
+    <div>
       {social}
       {separator}
       {header}

src/engine/passwordless/social_or_phone_number_login_screen.jsx

@@ -41,7 +41,7 @@ const Component = ({ i18n, model }) => {
   const separator = social && phoneNumber ? <PaneSeparator /> : null;
 
   return (
-    <div className="auth0-lock-internal-content-wrapper">
+    <div>
       {social}
       {separator}
       {phoneNumber}