使用Tailwind实现无溢出全屏布局，解决高度溢出问题

问题根源 #

左侧纵向容器未设置高度约束，aspect-square属性会强制元素宽高相等，当容器无明确高度限制时，元素会基于自身宽度计算高度，最终超出屏幕总高度。

修正后代码 #

<div className="flex h-screen">
  <!-- 左侧纵向容器：启用弹性布局并继承父容器全屏高度 -->
  <div className="flex flex-col h-full">
    <Header className="h-5" /> <!-- 固定20px高度，h-5对应Tailwind的20px尺寸 -->
    <!-- Board容器：占据Header剩余高度，保持正方形比例，溢出内容隐藏 -->
    <div className="flex-grow aspect-square overflow-hidden bg-red-500">
      <Board />
    </div>
  </div>

  <!-- 中间控制栏：固定20px宽度，占满屏幕高度 -->
  <div className="w-5 h-full">
    <ControlBar />
  </div>

  <!-- 右侧面板：占据剩余宽度，占满屏幕高度 -->
  <div className="flex-1 h-full">
    <Panel />
  </div>
</div>

核心调整说明 #

• 左侧容器添加flex h-full：确保容器采用弹性布局并完全继承父容器的全屏高度，让flex-col和flex-grow能正确分配Header之外的剩余空间。
• Board容器设置flex-grow aspect-square overflow-hidden：flex-grow让容器自动填充剩余高度，aspect-square强制宽高一致，overflow-hidden避免内容超出容器边界。
• 中间控制栏明确w-5 h-full：替代模糊的flex-initial，直接定义固定宽度和全屏高度。
• 右侧面板简化为flex-1 h-full：直接占据剩余宽度和全屏高度，去掉冗余嵌套。

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