Как заставить flex-basis работать в IE11

мой сайт полностью сломан в IE11. Проблема исходит от flex: 1 1 0%;, который я использую везде спасибо autoprefixer и postcss-flexbugs-исправления.

сайт работает на IE, когда я меняю его на flex: 1 1 auto;, но затем некоторые поведения меняются (например, один flexbox с двумя flex: 1 1 auto; дети, которые не занимают точно такое же пространство). Поэтому это решение нарушает мои проекты в других браузерах (делая его намного приятнее-не сломанным ИЕ11).

как людям удается заставить свои сайты, построенные с помощью Flexbox, работать на IE11?

Edit: вот ручка, которая подчеркивает проблему, с которой я сталкиваюсь:https://codepen.io/Zephir77167/pen/GMjBrd (попробуйте на Chrome и IE11).

Edit2: вот код:

HTML-код:

<div id="a" class="flex">
  <div id="b" class="item flex-1">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1">
    Heyheyheyheyho
  </div>
</div>
<br />
<div id="a" class="flex">
  <div id="b" class="item flex-1-variation">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1-variation">
    Heyheyheyheyho
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}

#a {
  background-color: pink;
  height: 300px;
  width: 100px;
}

#b {
  background-color: green;
  height: 50px;
}

#c {
  background-color: blue;
  height: 100px;
}

#d {
  background-color: yellow;
  height: 150px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.item.flex-0 {
  flex: none;
}

.item.flex-1 {
  flex: 1 1 0%;
}

.item.flex-1-variation {
  flex: 1 1 auto;
}
6
css css3 flexbox internet-explorer internet-explorer-11

1 ответов

когда дело доходит до IE11, вы можете настроить его явно, используя это правило CSS:

_:-ms-fullscreen, :root .IE11-only-class { 

  /* IE11 specific properties */

}

фрагмент стека

* {
  box-sizing: border-box;
}

#a {
  background-color: pink;
  height: 300px;
  width: 100px;
}

#b {
  background-color: green;
  height: 50px;
}

#c {
  background-color: blue;
  height: 100px;
}

#d {
  background-color: yellow;
  height: 150px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.item.flex-0 {
  flex: none;
}

.item.flex-1 {
  flex: 1 1 0%;
}

_:-ms-fullscreen, :root .IE-FlexAuto {
  flex-basis: auto;
}
<div id="a" class="flex">
  <div id="b" class="item flex-1 IE-FlexAuto">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1 IE-FlexAuto">
    Heyheyheyheyho
  </div>
</div>

вот сообщение с моим ответом, который говорит еще об этом, а также предоставляет некоторые решения скриптов, которые могут быть полезны

4