CODEWITHSUNDEEP
htmlcssflexbox
user8758206
user8758206

Reputation: 2191

Flex item width not resizing in IE

I'm trying to build a load of 'tiles' and am having trouble in internet explorer - most/all other browsers seem to be fine. The problem is, I want the tiles to only be 4 per row on desktop and 2 per row on mobiles, but in IE the other tiles just squeeze in on the same row rather than dropping to the next line.

The width of flex items doesn't seem to work, and should be 23.5% (on desktop) and 48.5% on mobiles. Can someone explain what's going on here? It seems that IE does not like contemporary code!

/* Flex Tests */
.sad-flex {
    display: flex;
    flex-flow: row wrap;
}
.flex-item {
    width: 23.5%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) { margin-left: 2% }
.flex-item:nth-of-type(n+5) { margin-top: 2% }
.flex-item-image-link { width: 100% }
.flex-item img {
    width: 100%;
    background-size: cover;
    background-position: center;
}
.flex-item, .flex-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
    text-align: center;
    font-family: arial; /* perhaps remove */
    justify-content: flex-start;
}
.flex-text-content { padding: 10px }
.flex-item .flex-text.header {
    margin-bottom: 0;
    font-weight: 700;
    width: 100%;
}
.flex-item .flex-text.header a { color: #000 }
.flex-item .flex-text.price {
    padding-top: 20px;
    font-size: 1.4em;
    color: grey;
}
.flex-item .flex-text.description {
    font-size: 1em;
    padding-top: 20px;
    max-height: 6em; /* limits to 3 lines of text */
    overflow: hidden;
}
.flex-item .flex-btn {
    border: none;
    outline: 0;
    padding: 12px;
    color: #fff;
    background-color: #000;
    cursor: pointer;
    width: 100%;
    font-size: 1.3em;
    margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover { opacity: 0.7 }
.flex-item ul { text-align: left }
@media (max-width: 767px) {
    .flex-item:not(:nth-of-type(4n+1)) { margin-left: 3% }
    .flex-item { width: 48.5% }
    .flex-item:not(:nth-of-type(even)) { margin-left: 0 }
    .flex-item:nth-of-type(n+3) { margin-top: 3% }
}
/* IE FIXES */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .sad-flex {
        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;
    }
    .flex-item {
        -ms-flex: 1;
    }
    .flex-item * { width: 100% }
}
<div class="sad-flex">

    <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
    

<div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>

</div>

Upvotes: 2

Views: 52

Answers (1)

Itay Gal
Itay Gal

Reputation: 10834

IE doesn't support the flex: flex-grow flex-shrink flex-basis shorthand.

You need to change it to flex-grow.

For example this

flex: 1 2 30px;

should be replaced with this

flex-grow: 1;
flex-shrink: 2;
flex-basis: 30px;

In your case

.flex-item {
    flex-grow: 1;
}


/* Flex Tests */
.sad-flex {
    display: flex;
    flex-flow: row wrap;
}
.flex-item {
    width: 23.5%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) { margin-left: 2% }
.flex-item:nth-of-type(n+5) { margin-top: 2% }
.flex-item-image-link { width: 100% }
.flex-item img {
    width: 100%;
    background-size: cover;
    background-position: center;
}
.flex-item, .flex-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
    text-align: center;
    font-family: arial; /* perhaps remove */
    justify-content: flex-start;
}
.flex-text-content { padding: 10px }
.flex-item .flex-text.header {
    margin-bottom: 0;
    font-weight: 700;
    width: 100%;
}
.flex-item .flex-text.header a { color: #000 }
.flex-item .flex-text.price {
    padding-top: 20px;
    font-size: 1.4em;
    color: grey;
}
.flex-item .flex-text.description {
    font-size: 1em;
    padding-top: 20px;
    max-height: 6em; /* limits to 3 lines of text */
    overflow: hidden;
}
.flex-item .flex-btn {
    border: none;
    outline: 0;
    padding: 12px;
    color: #fff;
    background-color: #000;
    cursor: pointer;
    width: 100%;
    font-size: 1.3em;
    margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover { opacity: 0.7 }
.flex-item ul { text-align: left }
@media (max-width: 767px) {
    .flex-item:not(:nth-of-type(4n+1)) { margin-left: 3% }
    .flex-item { width: 48.5% }
    .flex-item:not(:nth-of-type(even)) { margin-left: 0 }
    .flex-item:nth-of-type(n+3) { margin-top: 3% }
}
/* IE FIXES */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .sad-flex {
        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;
    }
    .flex-item {
        flex-grow: 1;
    }
    .flex-item * { width: 100% }
}
<div class="sad-flex">

    <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
    

<div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>

</div>

Upvotes: 1

Related Questions