Encountering an issue with flexbox and IE10/11. Trying to utilize min-width/max-width values, but IE11 is not cooperating. Discovered flex-basis and used a percentage value, which functions as intended in Chrome but fails in IE11.
Experimented with adding flex-direction row and column, but still no success.
/* 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­zentrale wie der Browser Ihres PCs. Je nach Modell schaltet das Web-IO in klassischer 24V Automatisierungs­technik, mit potential­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­schalter reicht aus, damit das Web-IO im Ernstfall per E-Mail die zuständigen Mitarbeiter informiert. Weitere Alarmierungs­möglichkeiten sind SNMP-Trap, TCP-Meldung, MQTT-Publish und mehr.</p>
</div>
</li>
</ul>Comparison with Chrome:
https://i.sstatic.net/zXynV.png
Comparison with IE11:
https://i.sstatic.net/ZzhAX.png
Managed to work in IE11 using a pixel value like 250px. However, a media query setting width to 100% on mobile does not work, and I prefer avoiding a fixed pixel value for mobile view.