In the project I use display: flex; . All browsers are OK except IE 11.

Here is the code:

 .container-wrap, .container-wrap>article { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .row-flex-wrap { -webkit-flex-flow: row wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-flex: 0; -webkit-flex: 0; -ms-flex: 0; flex: 0; } .news { width: 50%; } 
 <div class="container-wrap row-flex-wrap"> <article class="news"> <div class="news-wrap"> <div class="news-heading"> <a href="#" class="news-rubric">Россия</a> - <span class="news-date">2 июля 2014</span> </div> <a href="#"> <img src="img/preview1.jpg" alt="" /> <h3>Факультет неугодных людей</h3> <p>Что стоит за кадровыми перестановками на социологическом факультете МГУ</p> </a> </div> </article> <article class="news"> <div class="news-wrap"> <div class="news-heading"> <a href="#" class="news-rubric">ЧМ-2014</a> - <span class="news-date">2 июля 2014</span> </div> <a href="#"> <img class="img img-responsive" src="img/preview2.jpg" alt="" /> <h3>Статистика - дело тонкое</h3> <p>Занимательные цифры чемпионата мира по футболу в Бразилии</p> </a> </div> </article> </div>

In IE 11, it looks like this: IE 11 flex

Can you please tell me how to fix this?

    1 answer 1

    Try writing for news:

     .news { flex: 0 0 50%; width: 50%; }

    And for wrap to work, list for .row-flex-wrap:

     .row-flex-wrap { flex-wrap: wrap; }

    Vendor prefixes sprinkle to taste. And it’s better to do this automatically with some kind of autoprefixer, otherwise it’s quite difficult to read such a css.

    • This is gulp compiling. thanks, helped) - Marina Voronova