Блог

У меня возникли проблемы с ограничением высоты внутреннего div, чтобы правильно разрешить прокрутку этого внутреннего div, когда его содержимое увеличивается больше, чем высота.

Скорее всего, это связано с отсутствием знаний html/css, но я использую TailwindCss, поэтому не исключаю возможности неправильного использования этого.

Вот что у меня есть на данный момент…

 lt;div className="grid grid-cols-5 bg-gray-100 h-screen overflow-hidden"gt;  lt;div className="max-w-md m-auto max-w-full mr-0 col-span-2"gt;  lt;div className="max-w-xl"gt;  lt;h1 className="text-2xl font-bold text-gray-900 text-3xl"gt;  Blah Blah Blah.  lt;br className="inline" /gt;  lt;span className="text-indigo-500"gt;{currentPage?.tagLine}lt;/spangt;  lt;/h1gt;  lt;p className="mt-2 text-gray-600 mt-4 text-xl"gt;  {currentPage?.description}  lt;/pgt;    lt;/divgt;  lt;/divgt;  lt;div className="max-h-full h-full px-8 py-12 col-span-3"gt;  lt;Tabs color="indigo"  tabPages={pages} /gt;  lt;div className="min-w-0 bg-white w-full h-5/6 max-h-5/6 mb-6 shadow-lg rounded"gt;  lt;div className="px-8 py-12 w-full overflow-y-auto h-full max-h-full"gt;  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  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  

В итоге все выглядит вот так…

Я пытаюсь установить фиксированную высоту для области содержимого с правой стороны, чтобы поле никогда не увеличивалось в высоту, независимо от того, сколько содержимого в него помещено. В настоящее время, если я добавлю больше текста, достаточного для заполнения поля, это заставит поле исчезнуть с экрана внизу.

Действительно не знаю, куда идти дальше. Любая помощь будет признательна.