Flex-basis 对 IE11 的百分比支持？

Question

我对 flexbox 和 ie10/11 有疑问。 我想使用 min-width / max-width 值，但这在 IE11 中不起作用。 我发现了我使用百分比值的 flex-basis。
它在 Chrome 中按预期工作，但在 IE11 中无法正常工作。

我尝试添加 flex-direction 行和列，但也没有用。

/* List */

.c-collist {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /*width: -webkit-fill-available;*/
  margin: 0 auto;
}


/* Listitem */

.c-collist>li {
  position: relative;
  flex-basis: 45%;
  flex-shrink: 0;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
}

<h4>Features</h4>
<ul class="c-collist t-name">
  <li>
    <img src="/pics/icon/e-5w92w-05-grww-000.svg" width="100" height="100" alt="Schalten" />
    <div class="c-flextext">
      <h5>Schalten</h5>
      <p>Ihr Smartphone wird genauso zur Schalt&shy;zentrale wie der Browser Ihres PCs. Je nach Modell schaltet das Web-IO in klassischer 24V Automatisierungs&shy;technik, mit potential&shy;freien Kontakten oder direkt 230V.</p>
    </div>
  </li>
  <li>
    <img src="/pics/icon/mqtt.svg" width="64" height="64" alt="IoT-Gateway" />
    <div class="c-flextext">
      <h5>MQTT und REST</h5>
      <p>Durch die Unterstützung von MQTT und REST ist das Web-IO 4.0 ideal vorbereitet für IoT-Lösungen und Industrie 4.0.</p>
    </div>
  </li>
  <li>
    <img src="/pics/icon/e-5w92w-08-grww-000.svg" width="100" height="100" alt="Melden" />
    <div class="c-flextext">
      <h5>Alarmierung</h5>
      <p>Ein potentialfreier Kontakt oder Grenzwert&shy;schalter reicht aus, damit das Web-IO im Ernstfall per E-Mail die zuständigen Mitarbeiter informiert. Weitere Alarmierungs&shy;möglichkeiten sind SNMP-Trap, TCP-Meldung, MQTT-Publish und mehr.</p>
    </div>
  </li>
</ul>

这是我使用 Chrome 得到的结果：

那就是 IE11

当我使用例如 250 像素的像素值时，它在 IE11 中有效。 但我有一个媒体查询，在移动设备中将宽度设置为 100%。 这也不起作用，我真的不喜欢为移动设备设置明确的像素值。

Answer 1

为了安全使用 IE11，您应该坚持最基础的操作。
这应该可以正常工作：

/* List */

.c-collist {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  
  list-style-type: none;
  padding: 0;
}


/* List item */

.c-collist li {
  width: 45%;
  padding: 1rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .c-collist li {
    width: 100%;
    margin: 0 auto;
    max-width: 520px;
  }
}

<h4>Features</h4>
<ul class="c-collist t-name">
  <li>
    <img src="/pics/icon/e-5w92w-05-grww-000.svg" width="100" height="100" alt="Schalten" />
    <div class="c-flextext">
      <h5>Schalten</h5>
      <p>Ihr Smartphone wird genauso zur Schalt&shy;zentrale wie der Browser Ihres PCs. Je nach Modell schaltet das Web-IO in klassischer 24V Automatisierungs&shy;technik, mit potential&shy;freien Kontakten oder direkt 230V.</p>
    </div>
  </li>
  <li>
    <img src="/pics/icon/mqtt.svg" width="64" height="64" alt="IoT-Gateway" />
    <div class="c-flextext">
      <h5>MQTT und REST</h5>
      <p>Durch die Unterstützung von MQTT und REST ist das Web-IO 4.0 ideal vorbereitet für IoT-Lösungen und Industrie 4.0.</p>
    </div>
  </li>
  <li>
    <img src="/pics/icon/e-5w92w-08-grww-000.svg" width="100" height="100" alt="Melden" />
    <div class="c-flextext">
      <h5>Alarmierung</h5>
      <p>Ein potentialfreier Kontakt oder Grenzwert&shy;schalter reicht aus, damit das Web-IO im Ernstfall per E-Mail die zuständigen Mitarbeiter informiert. Weitere Alarmierungs&shy;möglichkeiten sind SNMP-Trap, TCP-Meldung, MQTT-Publish und mehr.</p>
    </div>
  </li>
</ul>