After implementing a simple code using flexbox, everything seemed to be working flawlessly on Firefox, Safari, Chrome, Edge, and Opera, but encountered issues with IE11. The problem arises with responsive frames containing images and text within a specific area. The code includes the usage of
display: -webkit-flex; display: -ms-flexbox; display: flex;https://i.sstatic.net/KRG8v.png
Despite trying various suggestions found on Stackoverflow, such as adding more code lines or modifying the width and height properties, the issue persists. It's unclear what might be causing the problem.
If you wish to view the full snippet, click the link provided above. Any assistance would be appreciated.
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%;
}
...
<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>