Прокрутка и переполнение в реакции: почему прокручивается все приложение, а не только div ⇐ CSS

[Гость]

Я воссоздал очень простой проект реагирования, чтобы продемонстрировать проблему, с которой столкнулся.

В этом проекте у меня есть простой заголовок, боковая панель и главная страница. В элементе главной страницы у меня есть кнопка для добавления нового документа в список документов. Список отображается вертикально под кнопкой. Высота элемента контейнера приложения установлена ​​на 100vh. Поведение, которого я хочу достичь, заключается в том, чтобы прокручивать только элемент главной страницы, когда список документов становится слишком длинным. Вот полный машинописный код проекта:

DebugApp.tsx:

импортировать "./debugapp.css" импортировать React, {useState} из «реагировать»; интерфейсный документ { заголовок: строка; doc_id: номер } функция DebugApp() { const [documents, setDocuments] = useState([]); const addElement = () => { setDocuments( [...documents, {title: 'test', doc_id: 1}]) } возвращаться ( Заголовок добавить

• {documents.map((document: Document) => {return
• {document.title}})}

); } экспортировать DebugApp по умолчанию; А вот связанный CSS-код (яркие цвета для целей отладки, заголовок — зеленый, боковая панель — красный, а главная страница — синий):

debugapp.css:

.app-container { ширина: 100%; высота: 100вх; дисплей: гибкий; гибкое направление: столбец; } .header { высота: 50 пикселей; ширина: 100%; цвет фона: зеленый; } .основной { дисплей: гибкий; гибкое направление: строка; высота: 100%; } .сайдбар { ширина: 30 пикселей; высота: 100%; цвет фона: красный; } .Главная страница { ширина: 100%; высота: 100%; цвет фона: #0000ff; переполнение-у: авто; } .doc { высота: 4рем; белый цвет; } То, что здесь происходит, на данный момент не имеет никакого смысла. Вначале веб-сайт выглядит так, как я хочу:

Изображение: первый вид приложения

Когда я добавляю несколько документов, все работает так, как ожидалось:

Изображение: все в норме

Но как только я достигаю ограничения размера экрана браузера, происходит следующее:

Изображение: прокручивается все приложение

Заголовок сжимается, и все приложение становится прокручиваемым только на высоту заголовка.

Если я продолжу добавлять документы, главная страница станет прокручиваемой и появится вторая полоса прокрутки:

Изображение: две полосы прокрутки, нежелательное поведение

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

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

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