[InputAdornment] Fix flexbox alignment bug for IE (#12975)

* InputAdornment: Fix flexbox alignment bug for IE

* let's merge

Author: oliviertassinari

docs/src/pages/demos/text-fields/FilledInputAdornments.js

@@ -18,7 +18,7 @@ const styles = theme => ({
     margin: theme.spacing.unit,
   },
   textField: {
-    flexBasis: 280,
+    flexBasis: 200,
   },
 });
 

docs/src/pages/demos/text-fields/OutlinedInputAdornments.js

@@ -18,7 +18,7 @@ const styles = theme => ({
     margin: theme.spacing.unit,
   },
   textField: {
-    flexBasis: 280,
+    flexBasis: 200,
   },
 });
 

packages/material-ui/src/InputAdornment/InputAdornment.js

@@ -8,6 +8,7 @@ export const styles = {
   /* Styles applied to the root element. */
   root: {
     display: 'flex',
+    height: '0.01em', // Fix IE 11 flexbox alignment. To remove at some point.
     maxHeight: '2em',
     alignItems: 'center',
   },

packages/material-ui/src/InputBase/InputBase.js

@@ -75,7 +75,7 @@ export const styles = theme => {
       display: 'block',
       // Make the flex item shrink with Firefox
       minWidth: 0,
-      flexGrow: 1,
+      width: '100%', // Fix IE11 width issue
       '&::-webkit-input-placeholder': placeholder,
       '&::-moz-placeholder': placeholder, // Firefox 19+
       '&:-ms-input-placeholder': placeholder, // IE 11