Есть контейнер с шириной 100%, в нем сетка с карточек (карточки имеют фиксированную ширину), вот
пример, суть такова, необходимо было сделать выравнивание по высоте самой высокой в ряду карточке. Я реализовал это с помощью флексов. Как бы не перестраивались карточки/ряды, всегда высота ряда идет по самой высокой карточке.
.offers__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.offers__card {
width: 420px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
padding: 10px;
position: relative;
cursor: pointer;
}
.card {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 23px 23px 19px;
}
в chrome/ff/opera/IE - все работает отлично, в safari все работает, но только карточки все абсолютно по максимальной высоте вне зависимости от ряда. Почему так и в чем косяк? Помогите разобраться. Спасибо.
проект собираю на gulp, плагин autoprefixer использую
UPD Пишу со слов и скринов заказчика, самому посмотреть на Сафари последней версии нет возможности.
Оказывается что в Safari при загрузке страницы карточки работают правильно, то есть в ряду выравниваются по самой высокой, а вот когда повлиять на экран, уменьшить его, что бы карточки перестроились, а потом увеличить экран что бы они снова перестроились, то вот и вылазит косяк, они намертво все занимают глобально максимальную высоту.
Простой
