diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
index 30b01a8562e4..223b46b789ab 100644
--- a/src/material-experimental/mdc-select/select.scss
+++ b/src/material-experimental/mdc-select/select.scss
@@ -25,10 +25,12 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-select-trigger {
-  display: inline-table;
+  display: inline-flex;
+  align-items: center;
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
+  width: 100%;
 
   .mat-mdc-select-disabled & {
     @include vendor-prefixes.user-select(none);
@@ -37,8 +39,6 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-select-value {
-  display: table-cell;
-  max-width: 0;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -52,8 +52,10 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-select-arrow-wrapper {
-  display: table-cell;
-  vertical-align: middle;
+  height: 24px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
 
   // When used in a box appearance form-field the arrow should be shifted up 40%.
   .mat-form-field-appearance-fill & {
diff --git a/src/material/select/select.scss b/src/material/select/select.scss
index ea69d84327a1..b481935632fc 100644
--- a/src/material/select/select.scss
+++ b/src/material/select/select.scss
@@ -19,10 +19,12 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
 }
 
 .mat-select-trigger {
-  display: inline-table;
+  display: inline-flex;
+  align-items: center;
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
+  width: 100%;
 
   .mat-select-disabled & {
     @include vendor-prefixes.user-select(none);
@@ -31,8 +33,6 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
 }
 
 .mat-select-value {
-  display: table-cell;
-  max-width: 0;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -44,8 +44,10 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
 }
 
 .mat-select-arrow-wrapper {
-  display: table-cell;
-  vertical-align: middle;
+  height: 16px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
 
   // When used in a box appearance form-field the arrow should be shifted up 50%.
   .mat-form-field-appearance-fill & {