html - 响应式 Flexbox Div

Question

我希望所有包含文本和背景颜色的内部 div 与外部 div (col) 具有相同的高度。

有没有没有 jQuery 的方法来实现这一点？

.row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
}

.col {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 1em;
    border: solid;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.col img{
    width:100%;
    height:auto;
}

   <div class="row">
    <div class="col"> 
        <div><img src="" alt="" /></div>
        <div style="background-color:#ff0000;">  
           This is a short text.
        </div>
    </div>
    
    <div class="col">
        <div><img src="" alt="" /></div> 
        <div style="background-color:#ff3654;" > 
            This is a text about how much I hate fucking around ith CSS when I'm not a pro. I wasted so much time on this issue I don't even mind writing this text. Sure you could use lorem ipsum but why bother, time you enjoy wasting is not wasted.
        </div> 
    </div>

        <div class="col"> 
        <div><img src="" alt="" /></div>
        <div style="background-color:#ff0000;">  
          This is CSS, just wanted to let you know that you suck.
        </div>
    </div>
       
</div>
  

https://jsfiddle.net/hcmnztof/1/

Answer 1

.col 可以再次使用 flexbox :

.col {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* default value */
}
.col > :last-child {
  flex-grow: 1;
}

.row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}
.col {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 1em;
  border: solid;
  justify-content: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.col > :last-child {
  flex-grow: 1;
}
.col img {
  width: 100%;
  height: auto;
}

<div class="row">
  <div class="col">
    <div>
      Image1
    </div>
    <div style="background-color:#ff0000;">
      Lorem ipsum.
    </div>
  </div>
  <div class="col">
    <div>
      Image2 <br/> Image2
    </div>
    <div style="background-color:#ff3654;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.
    </div>
  </div>
  <div class="col">
    <div>
      Image3 <br/> Image3 <br/> Image3
    </div>
    <div style="background-color:#ff0000;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
    </div>
  </div>

</div>