如何使用Flexbox让.col类子div占满父容器高度实现响应式等高布局

Flex行布局（flex-direction: row）下父容器默认align-items: stretch，所有直接子元素会自动拉伸至和父容器等高，无需提前设定父容器高度，天然适配响应式需求。调整方案如下：

修改后完整代码 #

<div class="justify-content-center row row-cols-4" style="display: flex; position: relative; background: linear-gradient(rgb(253, 221, 57) 0px, rgb(253, 221, 57) 0px) center bottom / 100% 70% no-repeat;">
   <div class="col" style="display: flex;">
      <div style="flex: 1; display: flex; align-items: flex-end; position: relative;"><img src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png" style="width: 70%;"></div>
   </div>
   <div class="col" style="display: flex;">
      <div style="flex: 1; display: flex; align-items: flex-end; position: relative;"><img src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png" style="width: 70%;"></div>
   </div>
</div>

关键修改说明 #

• 保留父容器的flex行布局，利用默认align-items: stretch特性让所有.col元素自动等高
• 给.col内部包裹图片的div添加flex: 1属性，使其自动占满.col的全部可用高度
• 将内部div原有的align-self: flex-end替换为display: flex+align-items: flex-end，保证图片始终在容器底部对齐的同时，内部div可以撑满整个父级高度

效果示意图 #

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