Как сделать так, чтоб блоки подстраивались под высоту самого высокого блока?

Question

[Overlord934]

Нужно чтоб они были одной высоты. Т.к дивы обернуты в блок слайда, флексовое распределение высоты не работает.

<div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="reviews__block">
                  <img class="reviews__block-img" src="img/avatar-1.png" alt="">
                  <p class="reviews__block-text">текст</p>
                  <p class="reviews__block-text reviews__block-subtext">текст</p>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="reviews__block">
                  <img class="reviews__block-img" src="img/avatar-2.png" alt="">
                  <p class="reviews__block-text">текст</p>
                  <p class="reviews__block-text reviews__block-subtext">текст</p>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="reviews__block">
                  <img class="reviews__block-img" src="img/avatar-3.png" alt="">
                  <p class="reviews__block-text">текст</p>
                  <p class="reviews__block-text reviews__block-subtext">текст</p>
                </div>
              </div>

CSS

.swiper {
  overflow-y: visible;
  overflow-x: clip;
  
}



.reviews__block {
  display: inline-block;
  position: relative;
  padding: 108px 46px 48px 48px;
  border: 2px solid #314b26;
  height: 100%;

}

.swiper-slide:nth-child(even) > .reviews__block{
  background-image: url(../img/review-block-bg.jpg);
  background-size: cover;
  color: #fff;
}

.swiper-slide:nth-child(2n) .reviews__block-subtext{
  color: rgba(255, 255, 255, 0.60);
}



.reviews__block-img {
  position: absolute;
  top: -80px;
  left: 50px;
  z-index: 1000;
  border-radius: 160px;
  border: 2px solid #314b26;
}

.reviews__block-text {
  max-width: 446px;
  min-height: 186px;
  line-height: 30.6px;
}

.reviews__block-subtext {
  margin-top: 20px;
  min-height: auto;
  color: #838383;
}

Comments

[szQocks]

флексовое распределение высоты не работает

- ну вот и разберись с тем - почему не работает, а так если контейнеру в котором они лежат задать dislplay: flex; то раз там по умолчанию будет align-items: stretch; то они и будут одинаковой высоты

[Ankhena]

szQocks, не всё так просто. Если детям задать height auto, то stretch перестанет работать как хочется. А в свайпере именно так.

[szQocks]

Ankhena, вы наверное перепутали, в свайпере я щас глянул, у них стоит height 100%, и с height 100% - не сработает, а с height: auto сработает

ну вывод тогда, ему надо ещё переопределить стиль height для swiper-slide, сделать его auto

[Ankhena]

szQocks, угу, не проснулась, вы правы. Но суть в том, что height там уже есть и дело в нем, а не в stretch.

Answer 1

[godsplane]

Вот буквально первая ссылка в гугле
https://github.com/nolimits4web/swiper/issues/2372