Select: fix option wrap in multiple mode (#12329)

* Select: Fix (#11392 & #12327) Writing space become small when collapse-tags prop is added & input takes new line even if space is available when filterable & multiple props are true

* Changes as IE & Edge dosen't support display: contents

* Revert "Changes as IE & Edge dosen't support display: contents"

This reverts commit 21475c6daa.

* Fixed issue - input going in new line even if there is space (collapse-tags)

* Made calculating with dynamic (replaced static 208 with el-select__tags dynamic width)

* Select: Fixed Bug - Extra Height

Fixed bug - getting extra height whenever last options width is most of same as select's width

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

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;