使用Tailwind实现带背景的Modal：内容上半部分截断无法滚动问题

问题出在外层遮罩容器同时设置了h-screen、flex justify-center items-center和overflow-auto：

• flex items-center会让模态框在屏幕垂直方向居中，当模态框内容高度超过屏幕高度时，模态框的顶部部分会超出外层容器（高度为屏幕高度）的可视区域。
• 外层容器的overflow-auto是让整个遮罩区域滚动，但滚动范围被限制在屏幕高度内，导致超出顶部的内容无法被滚动到。

调整结构，让模态框自身处理垂直居中和内容滚动，而不是依赖外层容器的flex居中：

1. 外层遮罩容器移除items-center，改用inset-0替代top-0 h-screen w-screen，并添加垂直方向的内边距避免模态框贴边。
2. 模态框通过my-auto实现垂直居中，同时设置max-h限制最大高度，自身添加overflow-auto让内部内容滚动。

修改后的代码：

<div class="z-[10000] fixed inset-0 bg-black/50 flex justify-center p-4">
  <div class="bg-white w-[44rem] max-h-[calc(100vh-2rem)] overflow-auto p-4 my-auto">
    modal first<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal last<br>
  </div>
</div>

• inset-0：快速设置元素占满整个视口，替代top-0 h-screen w-screen更简洁。
• my-auto：让模态框在垂直方向自动居中，避免flex居中导致的内容溢出问题。
• max-h-[calc(100vh-2rem)]：限制模态框最大高度为屏幕高度减去外层上下内边距总和（p-4对应上下各1rem），防止模态框撑满屏幕。
• 模态框自身的overflow-auto：内容过长时仅滚动模态框内部，不会影响外层遮罩区域的滚动。

内容的提问来源于stack exchange，提问作者Daniel Weiß