如何避免图片撑大父div，实现父div高度由右侧文本决定且左侧图片自动裁剪

核心逻辑是让左侧图片容器不参与父容器的高度计算，这样父容器的高度就完全由右侧文本的高度决定，同时让左侧容器自动撑满父容器高度实现图片裁剪。

你只需要在原有代码基础上，给左侧图片容器新增两个Tailwind类 h-0 和 min-h-full 即可，修改后的完整代码如下：

<div class="flex bg-green-500 text-white">
  <!-- 仅新增了h-0 min-h-full两个类 -->
  <div class="overflow-hidden block flex-shrink-0 w-1/3 h-0 min-h-full">
    <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
  </div>
  <div class="mx-2 flex flex-col justify-center">
    <h1>Long Title</h1>
    <h2>Some long sub text under the long title. Some long sub text under the long title. Some long sub text under the long title</h2>
  </div>
</div>

原理解释 #

• h-0 会将左侧容器的高度初始值设为0，此时容器的固有内容高度不会参与父Flex容器的高度计算，父容器的高度完全由未做特殊设置的右侧文本区域决定
• min-h-full 会让左侧容器自动拉伸到占满父容器的全部高度，配合原有overflow-hidden和img标签的object-cover设置，就能实现图片按照父容器高度自动裁剪显示，不会出现溢出或者撑高父容器的问题
• 该方案完全响应式，不需要设置任何固定高度，适配所有屏幕尺寸和不同长度的文本内容。

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