我正在使用TailwindCSS来创建我的页面设计。我不能将组件和图像设置为相同的大小。
我已经尝试了一些组合与flex，wrap，改变宽度的div或图像，但没有找到一个解决方案。我想作为一个结果是相同大小的矩形包含图像，相同大小的图像，为每部电影，他们的名字在下面。和，为溢出，我希望能够滚动他们的x规模，但不是在y规模。我设法做到了这一点，但我需要保持这一点，并有正确的大小太。
我希望图像显示如下：（https://i.stack.imgur.com/16C7M.jpg）但现在它们是这样的：（https://i.stack.imgur.com/8L0sD.png）。
一个图像的代码对所有图像都是相同的，只有图像的链接及其名称会发生变化。

<div
            class="bg-white rounded-[10px] border-4 cursor-pointer m-5 flex-wrap duration-500 w-1/6"
          >
            <img
              src="https://m.media-amazon.com/images/M/MV5BMWM5YzhmNGMtZTI4Ny00MGM4LThkYjAtMDIyMTEwNTQyZmQ1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg"
              alt="movie poster"
              class="rounded-t-[0.625rem] rounded-b-none w-full"
            />
            <div class="">
              <h1 class="text-xl font-normal">I am not okay with this</h1>
            </div>
          </div>

前面的代码包含在下面的代码中：

<div class="container mx-auto">
      <div class="m-5">
        <h1 class="text-3xl m-2 pb-1 font-bold text-black">Action</h1>
        <div class="flex overflow-y-hidden overflow-x-scroll border-4">
        ....
        .... (put here the code for the images)
        ....
        </div>
     </div>
</div>

谢谢你的帮助