先写一个布局

<div className="flex flex-col">
    <div className="bg-red-400">第一个子元素，固定高度</div>
    <div className="flex-1 bg-gray-500">第二个子元素，填充屏幕剩余高度</div>
</div>

实际运行结果

可以看到，第二个子元素并没有填充完剩余高度。这是因为flex-1只会让第二个子元素在其父元素的高度范围内填充剩余的空间。但默认情况下，父元素的高度并未设置为屏幕高度，所以 flex-1 的行为有限制

解决方法：给父元素设置一个高度，这里添加h-screen类，高度为100vh，也就是视口高度的100%

<div className="flex flex-col h-screen">
    <div className="bg-red-400">第一个子元素，固定高度</div>
    <div className="flex-1 bg-gray-500">第二个子元素，填充屏幕剩余高度</div>
</div>

再次运行查看结果

在电脑浏览器上进行测试时，一切看起来都很正常。然而，当我在手机浏览器上打开页面时，却意外地发现了滚动条的出现

移动端浏览器（如 Safari 和 Chrome）在滚动页面时，地址栏和工具栏会动态显示或隐藏。隐藏时，实际可见的视口高度会变大，而 100vh 是基于初始视口高度计算的。结果是，内容高度可能超过可用区域，导致页面滚动

解决方法，把100vh改成100dvh。dvh 是 dynamic viewport height 的缩写，表示在视口发生任何动态变化时的高度（如工具栏的隐藏或显示，或屏幕旋转时）。

dvh 适用于动态视口变化的情况，特别是当用户滚动页面或旋转设备时，dvh 会依据最新的视口计算元素的高度。这使得页面在交互时更为流畅，避免了元素高度的突变。