Internet Explorer 11 中的 CSS flex答案

【问题标题】：Css flex in internet explorer 11Internet Explorer 11 中的 CSS flex
【发布时间】：2020-05-23 00:09:19
【问题描述】：

.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 on input-group。结果一样。

有什么想法吗？

如果没有flex是可能的，我该如何替换flex？

【问题讨论】：

全部IE versions have problems with flex 甚至不支持
如果你也放上 html 也会有帮助
@Huangism 已修复！
@Michael_B 不，他们在那个问题上谈论网格。
@Joe，我很抱歉。我发布了错误的链接。这是我们的意图：stackoverflow.com/q/32239549/3597276

标签： css internet-explorer flexbox

【解决方案1】：

您可以尝试为输入搜索元素和 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>

输出如下：

【讨论】：