html - 如何在 Tailwindcss 中正确限制高度和滚动

Question

我在限制内部 div 的高度以在内部 div 的内容增加超过高度时正确允许滚动该内部 div 时遇到问题。

这很可能是由于缺乏 html/css 知识，但我使用的是 TailwindCss，所以不排除我错误地使用它的可能性。

这是我到目前为止...

    <div className="grid grid-cols-5 bg-gray-100 h-screen overflow-hidden">
        <div className="max-w-md m-auto max-w-full mr-0 col-span-2">
            <div className="max-w-xl">
                <h1 className="text-2xl font-bold text-gray-900 text-3xl">
                    Blah Blah Blah.
                    <br className="inline" />
                    <span className="text-indigo-500">{currentPage?.tagLine}</span>
                </h1>
                <p className="mt-2 text-gray-600 mt-4 text-xl">
                    {currentPage?.description}
                </p>
              
            </div>
        </div>
        <div className="max-h-full h-full px-8 py-12 col-span-3">
          <Tabs color="indigo"
                tabPages={pages} />
          <div className="min-w-0 bg-white w-full h-5/6 max-h-5/6 mb-6 shadow-lg rounded">
            <div className="px-8 py-12 w-full overflow-y-auto h-full max-h-full">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </div>
          </div>
        </div>
      </div>

这最终看起来像这样......

我正在尝试为右侧内容区域获取固定高度，以便无论放入多少内容，框都不应增加高度。目前，如果我添加更多文本，足以填充框，这将使框在底部离开屏幕。

真的不知道从这里去哪里。任何帮助，将不胜感激。

标签： htmlcsstailwind-css