Vue项目中Tailwind的overflow-x-auto在大屏下失效问题排查

我正在开发Vue项目，用Tailwind CSS写了这段HTML代码：

<div class="flex flex-col md:flex-row">
  <div class="m-6 ml-10 mr-5 mt-10">
    <div class="text-left">
      <input type="text" class="mb-6 h-10 w-full rounded-lg border-2 border-gray-300 p-2" placeholder="Search for workouts, profiles, etc." />
    </div>
    <div class="">
      <div class="mb-3 text-left">
        <p>Explore workouts</p>
      </div>
      <div class="flex h-28 flex-row gap-3 overflow-x-auto whitespace-nowrap">
        <div class="box inline-flex min-w-52 bg-black"></div>
        <div class="box inline-block min-w-52 bg-black"></div>
        <div class="box min-w-52 bg-black"></div>
        <div class="box min-w-52 bg-black"></div>
        <div class="box min-w-52 bg-black"></div>
        <div class="box min-w-52 bg-black"></div>
        <div class="box mb-5 min-w-52 bg-black"></div>
      </div>
    </div>
    
  </div>
</div>

问题是带overflow-x-auto的横向滚动容器在小屏能正常滚动，但大屏下滚动功能直接失效，内容溢出到空白区域。试过加相对定位（relative），没用。

大屏效果：

小屏效果：

核心原因是大屏下滚动容器的父元素没有宽度限制，导致容器跟着内容被无限撑开，自然不会触发横向滚动。按以下步骤修改：

1. 给滚动容器的直接父元素（包裹标题和滚动栏的空div）加w-full，让它占满当前可用宽度：

<div class="w-full">
  <div class="mb-3 text-left">
    <p>Explore workouts</p>
  </div>
  <div class="flex h-28 flex-row gap-3 overflow-x-auto whitespace-nowrap">
    <!-- 子元素保持不变 -->
  </div>
</div>

2. 如果大屏下仍有问题，给滚动容器额外加md:w-full确保宽度继承，还可以加scrollbar-thin优化滚动条样式（可选）：

<div class="flex h-28 flex-row gap-3 overflow-x-auto whitespace-nowrap md:w-full scrollbar-thin">

原理：overflow-x-auto生效的前提是容器有确定的宽度/最大宽度，当内容宽度超过容器时才会出现滚动条。大屏下原父元素没有宽度限制，被内容撑开后，滚动容器也跟着无限宽，所以不会触发滚动。加w-full后，父元素被限制在当前布局的可用宽度内，滚动容器继承这个宽度，内容超出时就会正常显示滚动条。

另外，外层md:flex-row布局下，确保左侧容器的宽度可控（比如用flex-1或固定宽度类），也能辅助避免这类问题。

内容的提问来源于stack exchange，提问作者CS student