Динамический прокручиваемый по высоте список в контейнере React ⇐ CSS

[Anonymous]

Я работаю над приложением React, в котором у меня есть список элементов, отображаемых в контейнере. Я хочу, чтобы список динамически адаптировался к высоте контейнера, сохраняя при этом возможность прокрутки. Но теперь содержимое расширяет высоту контейнера. Вот упрощенная версия моего кода: Песочница здесь: https://codesandbox.io/p/sandbox/flexbo ... %3A31%2C30

Я пробовал установить высоту контейнера на «авто» и использовать «maxHeight» в процентах, но столкнулся с проблемами, когда контейнер выходит за пределы области просмотра. Каков рекомендуемый подход для достижения динамической регулировки высоты контейнера, сохраняя при этом возможность его прокрутки в пределах доступного пространства?
import "./styles.css"; экспортировать функцию по умолчанию App() { const items = Array.from({ length: 50 }, (_, index) => `Item ${index + 1}`); возвращаться (

• {items.map((элемент, индекс) => (
• {item} ))}

); }