IE11 реализация 2-ух колонок одинаковых по высоте

332
25 декабря 2016, 19:09

Мне нужно несколько колонок в ряд, одинаковых по высоте и высота подстраивается под максимальный по высоте элемент. Реализовал известным образом:

.row-flex, .row-flex > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}
.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

В большинстве браузеров кроме ie11 работает корректно:

Но в ie11 вот такая беда: Как решить эту проблему? От способа организации высоты колонок отказываться не хочется, может кто-то решал подобные проблемы?

.post { 
  width: 100%; 
  border: 1px solid #e1e1e1; 
  border-top: none; 
} 
.post__marbot { 
  margin-bottom: 66px; 
} 
.post__img { 
  position: relative; 
  width: 100%; 
  overflow: hidden; 
  margin-bottom: 40px; 
  height: auto; 
} 
.post__img img { 
  height: auto; 
  width: 100%; 
} 
.post__tags { 
  right: 58px; 
  top: 44px; 
} 
.post__pad { 
  padding: 0px 60px 0px 70px; 
} 
.post__title { 
  font-size: 33px; 
  line-height: 43px; 
  font-weight: 400; 
  font-stretch: extra-condensed; 
  letter-spacing: 5px; 
} 
.post__title-pos { 
  margin-top: 7px; 
  margin-bottom: 20px; 
} 
.post__article { 
  color: #010101; 
  font-size: 15px; 
  font-weight: 300; 
  line-height: 25px; 
  letter-spacing: 1px; 
} 
.post__article-pos { 
  margin-bottom: 26px; 
} 
.post__read { 
  display: inline-block; 
  border: 1px solid #e1e1e1; 
  padding: 9px 36px; 
  color: #a7a7a7; 
  font-size: 15px; 
  letter-spacing: 3px; 
} 
.post__read-pos { 
  margin-bottom: 88px; 
} 
.post__data { 
  padding-bottom: 42px; 
} 
.post__older { 
  width: 100%; 
  display: block; 
  font-size: 18px; 
  font-weight: 400; 
  color: #fff; 
  text-align: center; 
  padding-top: 15px; 
  padding-bottom: 15px; 
  background-color: #555; 
  letter-spacing: 3px; 
} 
.post__older i { 
  margin-left: 8px; 
} 
.post__older:hover { 
  color: white; 
}
<div class="post__container"> 
                    <div class="row delete-pad-mar row-flex row-flex-wrap"> 
                        <div class="col-xs-12 delete-pad-mar post__marbot col-sm-6 post-2-pad"> 
                            <div class="post  frame__block"> 
                                <div class="frame__top"> 
                                    <div class="post__img"> 
                                        <a href=""><img src="img/post1-2col.jpg" alt=""></a> 
                                        <div class="tags post__tags main-text"><a href="">TRAVEL</a><a 
                                                href="">LIFESTYLE</a> 
                                        </div> 
                                    </div> 
                                    <div class="post__pad"> 
                                        <a href="" class=""><h3 
                                                class=" post__title post__title-pos hover__title main-text ">10 LIFE 
                                            CHANGING 
                                            MOMENTS FROM 10 YEARS</h3></a> 
                                        <p class="post__article post__article-pos main-textLato "> 
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                            quis nostrud 
 
                                        </p> 
 
                                    </div> 
                                </div> 
                                <div class="post__data spotlight__data main-text spotlight__pad frame__bottom post__pad"> 
                                    <a href="" 
                                       class="post__read post__read-pos main-text  hidden-xs hover__link">Read 
                                        more</a> 
                                    <div class="post__data1"> 
                                        <div class="spotlight__comm hover__data "><a href=""> 
                                            <i class="fa fa-comment-o" aria-hidden="true"></i><span class="">5</span></a> 
                                        </div> 
                                        <span><span class="spotlight__date">On OCTOBER 16, 2016</span>by <a href=""><span 
                                                class="spotlight__author hover__data">MARCO</span></a> 
                    </span> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="col-xs-12 delete-pad-mar post__marbot col-sm-6 post-2-pad"> 
                            <div class="post  frame__block"> 
                                <div class="frame__top"> 
                                    <div class="post__img"> 
                                        <a href=""><img src="img/post2-2col.jpg" alt=""></a> 
                                        <div class="tags post__tags main-text"><a href="">TRAVEL</a><a 
                                                href="">LIFESTYLE</a> 
                                        </div> 
                                    </div> 
                                    <div class="post__pad"> 
                                        <a href="" class=""><h3 
                                                class=" post__title post__title-pos hover__title main-text ">10 LIFE 
                                            CHANGING 
                                            MOMENTS FROM 10 YEARS</h3></a> 
                                        <p class="post__article post__article-pos main-textLato "> 
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                            quis nostrud 
 
                                        </p> 
 
                                    </div> 
                                </div> 
 
 
                                <div class="post__data spotlight__data main-text spotlight__pad frame__bottom post__pad"> 
                                    <a href="" 
                                       class="post__read post__read-pos main-text  hidden-xs hover__link">Read 
                                        more</a> 
                                    <div class="post__data1"> 
                                    <div class="spotlight__comm hover__data "><a href=""> 
                                        <i class="fa fa-comment-o" aria-hidden="true"></i><span class="">5</span></a> 
                                    </div> 
                                    <span><span class="spotlight__date">On OCTOBER 16, 2016</span>by <a href=""><span 
                                            class="spotlight__author hover__data">MARCO</span></a> 
                    </span> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="col-xs-12 delete-pad-mar post__marbot col-sm-6 post-2-pad"> 
                            <div class="post  frame__block"> 
                                <div class="frame__top"> 
                                    <div class="post__img"> 
                                        <a href=""><img src="img/post2-2col.jpg" alt=""></a> 
                                        <div class="tags post__tags main-text"><a href="">TRAVEL</a><a 
                                                href="">LIFESTYLE</a> 
                                        </div> 
                                    </div> 
                                    <div class="post__pad"> 
                                        <a href="" class=""><h3 
                                                class=" post__title post__title-pos hover__title main-text ">10 LIFE 
                                            CHANGING 
                                            MOMENTS FROM 10 YEARS</h3></a> 
                                        <p class="post__article post__article-pos main-textLato "> 
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                            quis nostrud 
 
                                        </p> 
 
 
                                    </div> 
                                </div> 
                                <div class="post__data spotlight__data main-text spotlight__pad frame__bottom post__pad"> 
                                    <a href="" 
                                       class="post__read post__read-pos main-text  hidden-xs hover__link">Read 
                                        more</a> 
                                    <div class="post__data1"> 
                                        <div class="spotlight__comm hover__data "><a href=""> 
                                            <i class="fa fa-comment-o" aria-hidden="true"></i><span class="">5</span></a> 
                                        </div> 
                                        <span><span class="spotlight__date">On OCTOBER 16, 2016</span>by <a href=""><span 
                                                class="spotlight__author hover__data">MARCO</span></a> 
                    </span> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="col-xs-12 delete-pad-mar post__marbot col-sm-6 post-2-pad"> 
                            <div class="post  frame__block"> 
                                <div class="frame__top"> 
                                    <div class="post__img"> 
                                        <a href=""><img src="img/post1-2col.jpg" alt=""></a> 
                                        <div class="tags post__tags main-text"><a href="">TRAVEL</a><a 
                                                href="">LIFESTYLE</a> 
                                        </div> 
                                    </div> 
                                    <div class="post__pad"> 
                                        <a href="" class=""><h3 
                                                class=" post__title post__title-pos hover__title main-text ">10 LIFE 
                                            CHANGING 
                                            MOMENTS FROM 10 YEARS</h3></a> 
                                        <p class="post__article post__article-pos main-textLato "> 
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                            quis nostrud 
                                        </p> 
 
 
                                    </div> 
                                </div> 
                                <div class="post__data spotlight__data main-text spotlight__pad frame__bottom post__pad"> 
                                    <a href="" 
                                       class="post__read post__read-pos main-text  hidden-xs hover__link">Read 
                                        more</a> 
                                    <div class="post__data1"> 
                                        <div class="spotlight__comm hover__data "><a href=""> 
                                            <i class="fa fa-comment-o" aria-hidden="true"></i><span class="">5</span></a> 
                                        </div> 
                                        <span><span class="spotlight__date">On OCTOBER 16, 2016</span>by <a href=""><span 
                                                class="spotlight__author hover__data">MARCO</span></a> 
                    </span> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div>

READ ALSO
Плавное появление без JS\jQuery

Плавное появление без JS\jQuery

Вопрос следующий, возможно ли плавное появление блока dropdown без использования JS jQuery и тп

453
Растянуть &lt;div&gt; на весь экран через padding

Растянуть <div> на весь экран через padding

Контент страницы находится в contanier со свойствами

333
Генерация квадратной таблицы

Генерация квадратной таблицы

Добрый вечер! У меня есть следующая страница:

319