Css flex in inte rnet explorer 11

Question

.search-wrapper {
  display: flex;
  margin: 0;
}

.search-wrapper #toggle-search-button {
  margin-right: 10px;
}

.search-wrapper .input-group {
  flex: 1 1 auto;
  padding-right: 0;
}

<div class="search-wrapper">
  <button class="btn btn-primary" id="toggle-search-button" ng-click="vm.toggleOpenSearchBar()">
          <span i18n="common.advancedSearch"></span>
          <i ng-if="!vm.projectSearchOpen" class="fa fa-arrow-right"></i>
          <i ng-if="vm.projectSearchOpen" class="fa fa-arrow-left"></i>
        </button>
  <div class="input-group input-group-lg">
    <span class="input-group-btn">
                <button class="btn btn-primary" ng-click="vm.search()" ng-disabled="vm.freeText.length < 2" type="button"><i
                  class="fa fa-search"></i></button>
              </span>
    <input class="form-control" id="input-search" placeholder="{{vm.translate.mainSearchPlaceholder | i18n}}" autofocus ng-keypress="vm.keypress($event)" ng-model="vm.freeText" esc-key="vm.reset()">
  </div>
</div>

Это кнопка, а рядом с ней группа ввода. Заполняет всю ширину. Работает в любом браузере, кроме IE11.

В IE11 группа ввода находится «снаружи» справа, с той же шириной, что и кнопка переключения поиска.

Я также попробовал: flex-grow: 1 на входной группе. Тот же результат.

Есть идеи?

Если не возможно сгибание, как я могу заменить сгибание?

Answer 1

Вы можете попытаться установить свойство width для входного поискового элемента и тела html.

код, как показано ниже:

<style>
    body{
        width:95%;
    }
    .search-wrapper {
      display: flex;
      margin: 0;
    }

    .search-wrapper #toggle-search-button {
          margin-right: 10px;
    }

    .search-wrapper .input-group {
          flex: 1 1 auto;
          padding-right: 0;
    }
    .search-wrapper #input-search {
      width:90%;
    }
</style>

Вывод так: