如何让Flexbox容器内的div高度匹配最高项（非固定高度）

我的文件中有如下div结构：

<div class=div-wrap>
   <div class="div-item">
   <div class="img">
      <img src="#">
   </div>
   <div class="txt">
      <p>text here but longer</p>
   </div>
   </div>

   <div class="div-item">
   <div class="img">
      <img src="#">
   </div>
   <div class="txt">
      <p>text here</p>
   </div>
   </div>
</div>

对应的CSS：

.div-wrap{
    display:flex;
    justify-content: space-between;
}

.div-item{
    flex-basis: 45%;
}

.txt{
    margin-top: -60px;
    padding: 10px;
    width: 80%;
}

当<p>标签内文本长度增加时，.txt类的div高度会出现不一致。核心需求是不设置固定高度，让Flexbox容器内的.txt高度匹配最高项的高度。

问题根源是.txt通过margin-top: -60px脱离了正常文档流，导致.div-item的flex等高特性无法传递给它。以下两种方法可解决：

方法1：将.div-item设为垂直flex容器 #

修改.div-item的CSS，让它成为垂直方向的flex容器，同时调整.txt的定位逻辑，利用flex的填充特性实现等高：

.div-wrap{
    display:flex;
    justify-content: space-between;
}

.div-item{
    flex-basis: 45%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.txt{
    position: absolute;
    bottom: 0;
    width: 80%;
    padding: 10px;
    flex-grow: 1;
}

.div-item作为flex子元素会自动与其他项等高，.txt基于父元素高度填充，自然实现统一高度。

方法2：改用Grid布局 #

Grid布局默认让同行列元素等高，实现起来更简洁：

.div-wrap{
    display: grid;
    grid-template-columns: 45% 45%;
    gap: 10%;
}

.div-item{
    position: relative;
}

.txt{
    position: absolute;
    bottom: 0;
    width: 80%;
    padding: 10px;
}

同列的.div-item高度自动对齐，.txt基于父元素定位即可保持高度一致。

内容的提问来源于stack exchange，提问作者goodnight sir