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>

Its a button, and next to it an input-group. Fills entire width. Works in every browser except IE11.

In IE11, the input group is "outside" to the right, with same width as the toggle-search-button.

I also tried: flex-grow: 1 on input-group. Same result.

Any ideas?

If not flex is possible, how can I replace flex?

all [IE versions have problems with flex](https://caniuse.com/#feat=flexbox) or even doesn't support it — Calvin Nunes, Feb 06 '20 at 21:10
@Michael_B No, they are talking about grid on that question. — Joe, Feb 06 '20 at 21:30
@Joe, my apologies. I posted the wrong link. Here is what was intended: https://stackoverflow.com/q/32239549/3597276 — Michael Benjamin, Feb 06 '20 at 21:45
@Michael_B Thanks. Sucks I work on Mac so I have to deploy to prod each time to see if any of the fixes work :/. — Joe, Feb 06 '20 at 21:51

score 0 · Answer 1 · answered Feb 07 '20 at 08:18

You could try to set the width property for the input search element and the html body.

code as below:

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

The output like this:

Css flex in internet explorer 11

1 Answers1