column-count and position fixed on Microsoft Edge - html

Question

On a current project I have a similar structure (here I have very simplified the structure):
http://jsfiddle.net/6j5ouhz4/3/
HTML
<div class="container">
<div class="columns">
<div class="column1">
<div class="openFlexbox"> OPEN </div>
<div class="flexbox">TEST
<span class="close">X</span>
</div>
</div>
<div class="column1">
<div class="openFlexbox"> OPEN </div>
<div class="flexbox">TEST
<span class="close">X</span>
</div>
</div>
<div class="column1">
<div class="openFlexbox"> OPEN </div>
<div class="flexbox">TEST
<span class="close">X</span>
</div>
</div>
<div class="column1">
<div class="openFlexbox"> OPEN </div>
<div class="flexbox">TEST
<span class="close">X</span>
</div>
</div>
</div>
</div>
CSS
.container {
border:1px solid black;
width:600px;
min-height:200px;
margin: 0 auto;
background: #ddd;
display:flex;
display: -ms-flexbox;
}
.columns {
column-gap: 8em;
column-count: 2;
}
.column1 {
display: block;
border:1px solid red;
width:200px;
height: 200px;
margin:10px;
position:relative;
}
.flexbox {
display:none;
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background: #aaa;
font-size:30px;
text-align:center;
z-index: 9999
}
.flexbox.open {
display:block;
}
.close {
border:1px solid #fff;
padding: 5px;
}
.openFlexbox {
background: #a6dbea;
padding: 10px 0;
text-align:center;
display:inline-block;
position:absolute;
width: 100px;
left: 50%;
margin-left:-50px;
top: 40%;
}
JS
jQuery('.openFlexbox').on('click',function(e) {
jQuery(this).next('.flexbox').addClass('open');
});
jQuery('.close').on('click',function() {
jQuery('.flexbox').removeClass('open');
});
Firefox and Chrome don't have any problem, on Microsoft edge the modalbox appear "halfsize" occupying the half area of column where this block is located (in this example instead, it does not appear at all).
Actually, by removing the relative position, the problem disappears, but the "position: relative" I use to center the button..
but the way, the relative position shouldn't effect the fixed positions.
There is a fix for this problem?

Answer 1

the 'openflexbox' does not cover the whole area but maybe this would work for you?
css:
.flexbox {
display:none;
/*position: fixed;*/
top:0;
left:0;
width:100%;
height:100%;
background: #aaa;
font-size:30px;
text-align:center;
z-index: 9999;
}
js:
jQuery('.openFlexbox').on('click',function(e) {
jQuery(this).next('.flexbox').addClass('open');
$('.openFlexbox').css('display', 'none');
});
jQuery('.close').on('click',function() {
jQuery('.flexbox').removeClass('open');
$('.openFlexbox').css('display', 'inline-block');
});