CSS Flex垂直布局中图片无法填充父元素max-height问题排查

你的问题出在包裹图片的子div没有高度约束，导致图片的h-full没有明确的父级高度参照。

父容器是flex flex-col max-h-[30rem] justify-between，虽然设置了最大高度和justify-between，但里面的两个子div默认是height:auto（由内容高度决定），没法分配父容器的可用空间，图片自然没法撑满。

两种快速解决方法： #

方法1：用flex-1让子div自动分配空间 #

给两个包裹img的div加上flex-1类，让它们自动平分父容器的可用空间（会自动减去gap的间距）：

<div class="flex flex-col gap-5 justify-between max-h-[30rem]">
   <div class="flex-1">
      <img class="h-full w-full object-cover rounded-2xl" src="{{ property_view.image_urls[1] }}" alt="house">
   </div>
   <div class="flex-1">
      <img class="h-full w-full object-cover rounded-2xl" src="{{ property_view.image_urls[1] }}" alt="house">
   </div>
</div>

方法2：手动计算子div高度 #

如果不想用flex-1，也可以手动计算每个子div的高度（父容器max-h是30rem，gap是5，所以每个div高度为calc(50% - 2.5rem)）：

<div class="flex flex-col gap-5 justify-between max-h-[30rem]">
   <div class="h-[calc(50%-2.5rem)]">
      <img class="h-full w-full object-cover rounded-2xl" src="{{ property_view.image_urls[1] }}" alt="house">
   </div>
   <div class="h-[calc(50%-2.5rem)]">
      <img class="h-full w-full object-cover rounded-2xl" src="{{ property_view.image_urls[1] }}" alt="house">
   </div>
</div>

方法1更灵活，后续调整父容器高度或gap时不用手动修改数值，优先推荐。

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