diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 7704e7dd0..dce3a09e4 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -8,7 +8,7 @@
       class="el-select__tags"
       v-if="multiple"
       ref="tags"
-      :style="{ 'max-width': inputWidth - 32 + 'px' }">
+      :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }">
       <span v-if="collapseTags && selected.length">
         <el-tag
           :closable="!selectDisabled"
@@ -64,7 +64,7 @@
         v-model="query"
         @input="debouncedQueryChange"
         v-if="filterable"
-        :style="{ width: inputLength + 'px', 'max-width': inputWidth - 42 + 'px' }"
+        :style="{ 'flex-grow': '1', width: inputLength / (inputWidth - 32) + '%', 'max-width': inputWidth - 42 + 'px' }"
         ref="input">
     </div>
     <el-input
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index d37a337fb..d11dcdca5 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -12,6 +12,11 @@
   display: inline-block;
   position: relative;
 
+  .el-select__tags
+    >span {
+      display: contents;
+    }
+
   &:hover {
     .el-input__inner {
       border-color: $--select-border-color-hover;