CODEWITHSUNDEEP
htmlcssinternet-explorerflexbox
Kirill
Kirill

Reputation: 23

Internet Explorer ignores width of flexbox container

The site I'm working has a responsive grid layout which I achieved with flexbox. The problem is, it looks really bad in IE (any version) because it for some reason it ignores the width of the containter and displays it much wider than the screen size.

I have managed to kinda fix this by adding a "max-width" but doesn't help much because the design is responsive.

This is what it's supposed to look like: http://gagadaily.com

This is what it looks like in IE: http://i62.tinypic.com/2v0dgf6.png

Here's the HTML. The content inside the container div is repeated many times.

<div id="ggd_forum_container">
  <div class="ggd_forum_box">
    <a href="#">
      <div class="ggd_forum_overlay" style="background-image:url(url.jpg)">
        <div class="ggd_forum_title">Title</div>
      </div>
    </a>
    <p>Description</p>
  </div>
</div>

Here's the css:

#ggd_forum_container {
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%;
max-width: 945px;
}

.ggd_forum_box {
width: 31.8%;
margin: 0 0 1% 2.3%;
}

.ggd_forum_overlay {
height: 140px;
margin-bottom: 5px;
background-size: auto 150px;
background-position: center;
position:relative;
-webkit-box-shadow:inset 0px 0px 0px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0px 0px 0px 1px rgba(0,0,0,0.1);
box-shadow:inset 0px 0px 0px 1px rgba(0,0,0,0.1);
}

.ggd_forum_overlay:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.ggd_forum_title {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 1.2;
color: #FFF;
bottom:0;
left:0;
width: 100%;
padding: 10px;
position: absolute;
text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
}

Any help would be appreciated!

Upvotes: 2

Views: 982

Answers (1)

Axel Cardinaels
Axel Cardinaels

Reputation: 168

Flexbox is only fully supported since IE11, to use it with IE10 you must use the 2012 syntax. Before that, IE is not supported.

You should check here : http://caniuse.com/#search=flexbox

Upvotes: 1

Related Questions