I am attempting to create a layout using Flexbox. In one of these layouts, I want 3 equal width columns. To accomplish this I am using calc to set the column width. This is working fine in modern browsers, but of course in IE it doesn't want to work. Here is my code:
.container {
width:50vw;
margin:0 auto;
display:flex;
}
.container > div {
flex:1 0 calc(100% / 3);
}
<div class="container">
<div>Test</div>
<div>Test</div>
<div>Test</div>
</div>
As I mentioned, this works fine in modern browsers, but in IE the columns just collapse on each other unless I use a specific percentage in place of calc
.