Css flex in internet 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中，输入组位于右侧的“外部”，宽度与切换-搜索-按钮相同。

我还在input-group上尝试了: flex-grow: 1。同样的结果。

有什么想法吗？

如果不能使用flex，我如何替换flex？

Answer 1

您可以尝试设置输入搜索元素和html正文的width属性。

代码如下：

<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>

输出如下所示：

​

​