I'm with a simple code, starting to use flexbox. It works perfect in Firefox, Safari, Chrome, Edge, Opera, but not in IE11.
They are flexible frames with images and text within a defined area. In my code I only use display: -webkit-flex; display: -ms-flexbox; display: flex; and it's enough. Some Stackoverflow responses indicate adding more lines of code, and nothing. I also found another case where they change all max-width min-width , max-height min-height by only width or height. I also tried it and nothing. Only four columns appear:
I can not find my mistake, any help? Better to see the extended snippet:
html{
position:absolute;
font-size:1.15rem;
font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-weight:500;
line-height:1.2rem;
color: #62647b;
height: 100%;
box-sizing: border-box;
margin: 4rem;
background: gray;
}
#FRAME {display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-flow: row;
overflow: hidden;
position: relative;
-ms-flex-preferred-size:25%;
flex-basis:25%;
width: 25%;
float:left;
background: #FFFFFF;
justify-content: space-between;
box-sizing:border-box;
border: solid 0.1rem gray;
}
.IMAGECOL{-ms-flex-preferred-size:63%;
flex-basis:63%;
width:63%;
display: block;
position: relative;
float:left;
padding: 0.22rem;
left:0%;
}
.IMAGECOL img {
display:block;
width:100%;
}
.INFOCOL{-ms-flex-preferred-size:37%;
flex-basis:37%;
width:37%;
background: #e9e9f3;
float:left;
margin-top: 0.075rem;
margin-left: 0.075rem;
padding: 0.22rem;
max-height:100%;
}
/*TEXT*/
.SUJET {padding-right: .5em;
}
.COMPANY {color: #FF0004;
font-weight:800;
line-height:0.8rem}
.DATE {
line-height:1.35rem;
font-weight:300;}
.HEAD{font-size:4rem;
white-space:nowrap;
margin-bottom:1rem;
margin-bottom:1.5rem;
color: #747691;
}
.SUBHEAD{font-size:3rem;
/*white-space:nowrap;*/
margin-bottom:0.5rem;
color: #747691;
text-align:center;
line-height: 3rem;}
.NAME {margin-bottom:0.1rem;
font-weight:400;
font-size:2.5rem;
color: #b0b1c8;
line-height:0;
letter-spacing: 0.35rem;
}
.MAIN{font-size:1.144rem;
margin-bottom:1.25rem;
padding:0 2rem;
text-align:center;
color: #747691;
line-height: 2.2rem;
letter-spacing: 0.35rem;
}
.LINE {background: darkgray;
height: 1px;
margin-top: 6px;
margin-bottom: 6px;
}
.LINE2{background: darkgray;
height: 1px;
margin-top: 8px;
margin-bottom: 4px;}<div id="FRAME">
<div class="IMAGECOL"><a href="#">
<img src="https://ptkotamas.files.wordpress.com/2017/02/kaolin-cold-drip-900ml-1.jpg?w=246&h=246&crop=1"></a>
</div>
<div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span>
</div>
</div>
<div id="FRAME">
<div class="IMAGECOL"><a href="#"><img src="https://ptkotamas.files.wordpress.com/2017/02/img_0928.jpg?w=246&h=246&crop=1"></a>
</div>
<div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span>
</div>
</div>
<div id="FRAME">
<div class="IMAGECOL"><a href="#"><img src="https://ptkotamas.files.wordpress.com/2017/02/esrum-11.jpg?w=329&h=329&crop=1"></a>
</div>
<div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span>
</div>
</div>
<div id="FRAME">
<div class="IMAGECOL"><a href=#">
<img src="https://ptkotamas.files.wordpress.com/2017/02/kaolin-cold-drip-900ml-1.jpg?w=246&h=246&crop=1"></a>
</div>
<div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span>
</div>
</div>