html - 拉伸(stretch)列以填充剩余的行高

This question already has answers here:

Bootstrap 4 row fill remaining height
                                
                                    （2个答案）
                                
                        
                        
                            How to make the row stretch remaining height
                                
                                    （1个答案）
                                
                        
                        
                            Fill remaining vertical space with CSS using display:flex
                                
                                    （4个答案）
                                
                        
                        
                            Flexbox - Fill remaining space
                                
                                    （3个答案）
                                
                        
                        
                            Flexbox fill available space vertically
                                
                                    （2个答案）
                                
                        
                                4个月前关闭。
            
                    
因此，我一直在寻找解决方案，但找不到任何解决方案。

我尝试了flex-grow: 1;，align-self: stretch;和其他一些flexbox属性，但是似乎没有一个可以解决问题。

我想使最后一列拉伸并占据该行的剩余高度。

遵循每个人的说法，我已经进行了一些调整，但是仍然不是我需要的。

（蓝色框是我想要伸展的东西）

查看以下代码段：

.product {
  border: 1px solid rgba(0,0,0,.2);
  padding: 15px;
  height: 100%;
}

.product .image {
  padding-bottom: 100%;
  background: rgba(255,0,0,.2);
  margin-bottom: 15px;
}

.product .content {
  border: 1px solid blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">

        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                The height of this is dynamic.
              </div>
            </div>
        </div>

        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                It can vary from product to product, but I would like this class to stretch.
              </div>
            </div>
        </div>

        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                To fill the rest of the columns height.
              </div>
            </div>
        </div>

    </div>
</div>

最佳答案

好的，所以我能够通过添加以下内容解决此问题：

display: flex;
flex-direction: column;

在我的.product课上：

flex-grow: 1;

在我的.content课上。

谢谢大家的帮助！ :)