I am currently working on a flexbox column layout that needs to be compatible with IE10. One issue I have encountered is that IE tends to expand a flex child based on its contents, while other browsers keep each flexbox at an equal width.
To address this problem, I have been setting a max-width: 50%, but it requires percentages to be adjusted depending on the number of columns needed. While this solution works for two columns, it becomes more complex when dealing with three or more columns, where we need values like 33.333%.
Does anyone know of an alternative method to ensure that IE10/11 maintains equal flex widths?
<div class="columns">
<div class="column">
<p>hey there this is some long text</p>
</div>
<div class="column"></div>
</div>
.columns {
display: -ms-flexbox;
-ms-flex-flow: row;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
}
.column {
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 0;
flex: 1 0 0;
min-height: 200px;
border: 1px solid red;
}