React项目使用Tailwind的overflow-x-hidden类时出现异常垂直滚动条

该问题由两个CSS特性共同触发：

1. 根据CSS溢出规范，当元素的overflow-x属性设置为非visible值时，浏览器会自动将该元素的overflow-y属性调整为auto，而非默认的visible，只要内容高度超出容器就会触发垂直滚动条。
2. Tailwind 预设的text-6xl类默认行高为1，加粗的超大字号字体实际渲染时，字符的上下延展区域会超出1倍行高的限制，导致内容实际高度大于父容器的计算高度，触发滚动条。

• 方案1：调整文本行高
  给大字号标题添加行高类，保证行高足够容纳字体的实际渲染尺寸，适合不需要修改外层容器溢出规则的场景。
  代码示例：

  function App() {
    return (
      <div className='overflow-x-hidden'>
        <div>
          <h1 className='font-extrabold text-6xl leading-normal'>asdfsdf </h1>
          <h1 className='font-extrabold text-6xl leading-normal'>asdfsdf </h1>
        </div>
      </div>
    );
  }
  export default App;
  

• 方案2：显式指定垂直溢出规则
  给外层overflow-x-hidden容器同时添加overflow-y-visible类，覆盖浏览器自动设置的auto值，允许内容垂直方向溢出不展示滚动条，适合不需要垂直裁剪内容的场景。
  代码示例：

  function App() {
    return (
      <div className='overflow-x-hidden overflow-y-visible'>
        <div>
          <h1 className='font-extrabold text-6xl'>asdfsdf </h1>
          <h1 className='font-extrabold text-6xl'>asdfsdf </h1>
        </div>
      </div>
    );
  }
  export default App;
  

• 方案3：给外层容器添加上下内边距
  给overflow-x-hidden容器添加合适的上下内边距，给字体溢出的部分留出展示空间，避免内容高度超出容器，适合需要保留容器裁剪能力的场景。
  代码示例：

  function App() {
    return (
      <div className='overflow-x-hidden py-2'>
        <div>
          <h1 className='font-extrabold text-6xl'>asdfsdf </h1>
          <h1 className='font-extrabold text-6xl'>asdfsdf </h1>
        </div>
      </div>
    );
  }
  export default App;
  

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