CSS Question
Flexbox doesn't work in IE 10
Hey there i am using a flexbox grid on a gallery to let the first div occupy 2 columns and make it all responsive.
It works all fine just in IE10 Flexbox goes crazy and the 2 Column Div goes super large, i cant figure out why.
http://codepen.io/HendrikEng/pen/wzRQNJ
CSS :
.c-showcase {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
.c-showcase::after {
clear: both;
content: '';
display: table;
}
.c-showcase-quote {
width: 50%;
float: left;
}
.c-showcase-item {
width: 25%;
float: left;
}
.c-showcase-item::after {
clear: both;
content: '';
display: table;
}
.c-showcase {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.c-showcase-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
img {
display: block;
height: auto;
width: 100%;
}
.c-showcase-quote {
background: black;
color: white;
}
HTML:
<div class="c-showcase">
<div class="c-showcase-block">
<div class="c-showcase-quote">
<h2 class="c-showcase-quote__title c-showcase-quote__title_outline_black">BLA BLA BLA</h2>
<p class="c-showcase-quote__content">blablalbl</p>
</div>
<div class="c-showcase-item">
<div class="o-image-container">
<img src="http://placehold.it/350x350">
</div>
</div>
<div class="c-showcase-item">
<div class="o-image-container">
<img src="http://placehold.it/350x350">
</div>
</div>
<div class="c-showcase-item">
<div class="o-image-container">
<img src="http://placehold.it/350x350">
</div>
</div>
<div class="c-showcase-item">
<div class="o-image-container">
<img src="http://placehold.it/350x350">
</div>
</div>
<div class="c-showcase-item">
<div class="o-image-container">
<img src="http://placehold.it/350x350">
</div>
</div>
<div class="c-showcase-item">
<div class="o-image-container">
<img src="http://placehold.it/350x350">
</div>
</div>
<div class="c-showcase-item">
<div class="o-image-container">
<img src="http://placehold.it/350x350">
</div>
</div>
</div>
</div>
Answer
You don't need float:left; on flex children. That's box model. What you probably want is:
.c-showcase-block {
display: flex;
flex-wrap: wrap;
}
.c-showcase-quote {
flex: 0 0 50%;
}
.c-showcase-item {
flex: 0 0 25%;
}
Prefixed version here:
.c-showcase-block {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.c-showcase-quote {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-moz-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
}
.c-showcase-item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-moz-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
}Wrap it in a media query if you don't want it applying at all widths. flex is a shorthand property for flex-grow, flex-shrink and flex-basis, in that order.
Source (Stackoverflow)