Tailwind CSS无内容时div消失 如何让div更好适配屏幕

代码没法实现预期效果有两个核心问题：

1. 从html根节点到组件容器的高度链路没有打通，flex布局的剩余空间分配是基于父容器的明确高度计算的，当前所有外层div都没有高度继承逻辑，容器没有基准高度自然没法自动分配剩余空间，空内容时高度为0就会表现为“消失”。
2. 下方横向分栏容器错误加了h-max类，这个类的作用是让容器高度永远贴合内容高度，不会主动占用父容器的剩余空间，完全不符合占满剩余高度的需求。

不需要写h-screen硬编码全屏高度，只要打通高度继承链路，配合flex的空间分配属性就能实现，步骤如下：

• 先打通全局高度链路：给html、body、React应用挂载的根节点（一般是id为root的div）设置height: 100%，清除默认margin，保证高度可以从视口逐层继承到组件
• 调整组件层级的flex属性，用flex-1让对应区块自动分配剩余空间，给需要滚动的容器加min-h-0解决flex子项默认最小高度为内容高度导致的滚动失效问题，给banner加flex-shrink-0防止被压缩

调整后的完整代码如下：

// 全局样式需要补充的代码，也可以直接给html、body、#root标签加h-full类实现
/*
html, body, #root {
  height: 100%;
  margin: 0;
}
*/

function App() {
  return (
    <div className="h-full flex flex-col">
      {/* 固定高度顶部banner，flex-shrink-0防止被内容压缩 */}
      <div className="bg-blue-400 h-16 flex-shrink-0"></div>
      {/* 下方分栏容器，flex-1占满banner之外的所有剩余高度，min-h-0保证内容溢出时正常触发滚动 */}
      <div className="flex flex-row items-stretch flex-1 min-h-0">   
        <div className="basis-3/4 bg-red-600 overflow-auto">
          <Mainscreen/>
        </div>
        <div className="basis-1/4 bg-black text-white overflow-auto">
          <Mainscreen/>
        </div>
      </div>
    </div>
  );
}

• h-full：让元素高度等于父容器高度，用来逐层传递高度基准
• flex-1：等价于flex: 1 1 0%，让flex子项按比例自动分配父容器的剩余可用空间，不需要手动写死高度值
• min-h-0：覆盖flex子项默认的min-height: auto规则，让容器可以缩小到比内容高度小，配合overflow-auto正确触发内部滚动
• overflow-auto：内容超出容器高度时自动显示滚动条，内容不足时不显示
• flex-shrink-0：告诉flex布局不要压缩这个元素的尺寸，保证顶部banner永远保持设置的固定高度

这个方案的适配性比直接写h-screen更好，后续如果页面外层要加全局顶栏、边距或者嵌套在其他固定高度容器中，不需要修改布局代码就能自动适配，空内容时左右分栏也会保持3:1的比例占满剩余高度，不会出现消失的问题。

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