Karle Karle - 1 month ago 7
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.

Comments