内容的Stretch div依赖关系

Question

我想要依赖于伸缩框的内容，我正在使用flexbox，但我不能这样做。下面链接了我的示例

Parent div 

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;

Child div 

  order: 0;
  flex: 0 1 auto;
  align-self: auto;

​

.slick-track {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
}
.slick-slide {
  width: 150px;
  margin: 10px;
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
.sliderItem {
  overflow: hidden;
  background: #2F2F2F;
  color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  cursor: pointer;
}
.sliderItemTitle {      
  font-size: 25px;
  font-weight: bold;
  padding: 20px 20px 0;
  min-height: 84px;
}
.sliderItemText {
  display: flex;
  padding-top: 10px;
  padding: 0px 20px;
  min-height: 58px;
  align-items: center;
}
.sliderItemLinkBox {
  margin-bottom: 20px;
  padding: 0 20px;
}
.sliderItemLink {
  color: yellow;
  text-transform: uppercase;
}

<div class="slick-track">

  <div class="slick-slide">
    <div> 
      <div class="sliderItem">
        <div class="sliderItemImg">
          <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="sliderItemTitle">
           <strong>Title 1</strong>
        </div>
        <div class="sliderItemText">
          lorema dadad addadadad adadadadadasd
        </div>
        <div class="sliderItemLinkBox">
          <div class="sliderItemLink">
            click
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="slick-slide">
    <div> 
      <div class="sliderItem">
        <div class="sliderItemImg">
          <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="sliderItemTitle">
           <strong>Title 2</strong>
        </div>
        <div class="sliderItemText">
          Lorem 
        </div>
        <div class="sliderItemLinkBox">
          <div class="sliderItemLink">
            click
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="slick-slide">
    <div> 
      <div class="sliderItem">
        <div class="sliderItemImg">
          <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="sliderItemTitle">
           <strong>Title 3</strong>
        </div>
        <div class="sliderItemText">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolore ipsa at minus molestias, neque rerum, aut minima voluptatum, dolorem odit nesciunt aliquid ullam officia reiciendis, recusandae natus maxime beatae.
        </div>
        <div class="sliderItemLinkBox">
          <div class="sliderItemLink">
            click
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>

​

https://jsfiddle.net/7qvo2tmk/5/

Answer 1

这可以使用JS循环元素并根据最高的元素调整高度来完成。

Working Example

let slides = document.querySelectorAll('.sliderItem')

function updateHeights() {
  let tallestSlide = 0
  for (i = 0; i < slides.length; i++) {
    if (slides[i].clientHeight > tallestSlide) {
        tallestSlide = slides[i].clientHeight
    }
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.height = tallestSlide + 'px'
  }

}

window.onresize = updateHeights
updateHeights()

Answer 2

您可以尝试这样做。

我所做的是删除包含.sliderItem的div，然后增加height:100%的.sliderItem的高度。因此它将占据其父div .slick-slide的高度。

​

.slick-track {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
}
.slick-slide {
  width: 150px;
  margin: 10px;
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
.sliderItem {
  height: 100%;
  overflow: hidden;
  background: #2F2F2F;
  color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  cursor: pointer;
}
.sliderItemTitle {      
  font-size: 25px;
  font-weight: bold;
  padding: 20px 20px 0;
  min-height: 84px;
}
.sliderItemText {
  display: flex;
  padding-top: 10px;
  padding: 0px 20px;
  min-height: 58px;
  align-items: center;
}
.sliderItemLinkBox {
  margin-bottom: 20px;
  padding: 0 20px;
}
.sliderItemLink {
  color: yellow;
  text-transform: uppercase;
}

<div class="slick-track">

  <div class="slick-slide">
      <div class="sliderItem">
        <div class="sliderItemImg">
          <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="sliderItemTitle">
           <strong>Title 1</strong>
        </div>
        <div class="sliderItemText">
          lorema dadad addadadad adadadadadasd
        </div>
        <div class="sliderItemLinkBox">
          <div class="sliderItemLink">
            click
          </div>
        </div>
      </div>
  </div>

  <div class="slick-slide">
      <div class="sliderItem">
        <div class="sliderItemImg">
          <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="sliderItemTitle">
           <strong>Title 2</strong>
        </div>
        <div class="sliderItemText">
          Lorem 
        </div>
        <div class="sliderItemLinkBox">
          <div class="sliderItemLink">
            click
          </div>
        </div>
      </div>
  </div>

  <div class="slick-slide">
      <div class="sliderItem">
        <div class="sliderItemImg">
          <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="sliderItemTitle">
           <strong>Title 3</strong>
        </div>
        <div class="sliderItemText">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolore ipsa at minus molestias, neque rerum, aut minima voluptatum, dolorem odit nesciunt aliquid ullam officia reiciendis, recusandae natus maxime beatae.
        </div>
        <div class="sliderItemLinkBox">
          <div class="sliderItemLink">
            click
          </div>
        </div>
      </div>
  </div>
  
</div>

​

希望这能有所帮助