Next.js 13 + Tailwind Flexbox布局：移动端子项高度不一致问题

需求：中等及以上屏幕下两个Flex子项宽度一致，小屏尺寸下高度一致。当前大屏宽度一致的效果已实现，但小屏时两个子项高度无法保持相同。

问题原因 #

小屏采用flex-col垂直布局时，右侧子项的Next.js Image组件默认会按自身比例撑开高度，导致左侧文本子项仅由内容高度决定，未占满父容器分配的flex空间；同时左侧子项的flex-wrap属性在垂直布局下无意义，可能干扰布局逻辑。

解决方案 #

调整子项布局配置，确保垂直布局下两个子项均占满分配空间，同时规范Image组件的填充方式：

<div className="bg-slate-500 min-h-screen flex flex-col md:flex-row">
  {/* 左侧文本容器 */}
  <div className="bg-orange-400 flex-1 flex flex-col justify-center text-4xl">
    <h1>Text</h1>
  </div>
  {/* 右侧图片容器 - 添加relative为Image提供定位上下文 */}
  <div className="bg-lime-500 flex-1 flex flex-col justify-center relative">
    <Image
      src={FreeSquareImg}
      alt="Sample"
      fill
      className="rounded-3xl object-contain"
    />
  </div>
</div>

关键修改点 #

• 移除左侧子项的flex-wrap属性（垂直布局下无需换行）
• 给右侧图片容器添加relative，配合Image的fill属性让图片完全填充容器
• 使用object-contain保证图片比例不变（若需要图片覆盖容器可替换为object-cover）

修改后效果：

• 大屏（md及以上）：保持两个子项横向平分宽度的原有效果
• 小屏：两个子项纵向平分父容器高度，高度完全一致

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