[Résolu] Hey, c'est quoi cette blague avec IE et Flexbox (win 8.1)

<main class="main-area">
        
        <div class="centered">

            <section class="cards">
                
                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="images/cropped/banana-wide.jpg" alt="A banana that looks like a bird">
                        </picture>
                        <div class="card-content">
                            <h2>The Banana Bird</h2>
                            <p>This banana looks a lot like a bird, doesn't it? When originally posted there was some debate whether it was a hummingbird, a seagull, or a crow. I stand by my earlier statement that it is a banana.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="images/cropped/boller.jpg" alt="Norwegian boller">
                        </picture>
                        <div class="card-content">
                            <h2>Norwegian Boller</h2>
                            <p>Boller - or sweet wheat buns - is a favored snack and comfort food for Norwegians, especially enjoyed for childrens' birthdays or on a cold and rainy/snowy day coupled with hot cocoa.</p>
                            <p>One of the key ingredients of boller is cardamom - something that gives them a distinct aroma and gives them the more lengthy name "cardamom boller".</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="images/cropped/dinosaur-jacket.jpg" alt="A dinosaur wearing an aluminium jacket">
                        </picture>
                        <div class="card-content">
                            <h2>A Dinosaur and Its Jacket</h2>
                            <p>They say dinosaurs had feathers. I prefer to think they were a bit more stylish than that, as proven by this dinosaur wearing a swanky aluminium coat.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="images/cropped/boller-surprise.jpg" alt="Chocolate filled boller">
                        </picture>
                        <div class="card-content">
                            <h2>A Sweet Surprise</h2>
                            <p>Oh yes: Sometimes when you bake boller, you put a piece of chocolate (usually dark) in the center before baking. That way when an unsuspecting recipient bites into the baked deliciousness they get a sweet surprise.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="images/cropped/chocolate-frog.jpg" alt="Chocolate frog on oranges">
                        </picture>
                        <div class="card-content">
                            <h2>Chocolate Frogs Love Oranges</h2>
                            <p>You know what's better than a chocolate covered caramel filled frog from Denmark? A chocolate covered caramel filled frog from Denmark served with juicy slices of orange.</p>
                            <p>Did I mention I like oranges?</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="images/cropped/diving-bird.jpg" alt="A whiskey jack taking a dive">
                        </picture>
                        <div class="card-content">
                            <h2>Taking the Plunge</h2>
                            <p>The Whiskey Jack is a surprisingly large bird that likes to eat food held up by tourists. In spite of what the image suggests, it does in fact have wings.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="images/cropped/pool-cue-jenga.jpg" alt="Playing Jenga with pool cues">
                        </picture>
                        <div class="card-content">
                            <h2>The Best Game Ever Invented</h2>
                            <p>On a recent trip to Europe my brothers and I invented a new game called "Pool Cue Jenga". It is the best game ever invented.</p>
                            <p>The rules are simple: You must use a pool cue to remove tiles. Only one cue can be used, and you can not use your fingers.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

            </section><!-- .cards -->
           
        </div><!-- .centered -->
        
    </main>

/* Flexbox stuff */

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: -1em;
    }

    .card {
        display: flex;
        flex: 0 1 calc(50% - .5em);
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 60em) {
    .cards {
        margin-top: inherit;
    }
    
    .card {
        flex: 0 1 calc(33% - 1em);
        margin-bottom: 2em;
    }
}

lionel_css3 a écrit :

...
flex: 0 1 calc(50% - .5em);
...