Динамическое размещение двух элементов div с разными типами переполнения. ⇐ Html

[Anonymous]

Я пытаюсь отобразить два контейнера div рядом. Левый контейнер должен соответствовать высоте тела, а контейнер и тело должны расширяться по вертикали при переполнении содержимого. Правильный контейнер должен соответствовать высоте тела, а его содержимое должно прокручиваться внутри при переполнении. Другими словами, оба контейнера должны заполнять высоту страницы, но страница должна расширяться только до той высоты, которую переполняет левый контейнер.

Код: Выделить всё

body {
margin: 0;
min-height: fit-content;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: row;
overflow-x: hidden;

background-color: #CCF;
}

#left-container {
width: 40%;
min-height: fit-content;
height: 100%;

background-color: #030;
color: #FFF;
}

#right-container {
width: 60%;
height: 100%;
overflow: auto;

background-color: #300;
color: #FFF;
}

#left-container div {
height: 2000px;
width: 80%;
margin: auto;
background-image: linear-gradient(#082, #06A);
}

#right-container div {
height: 3000px;
width: 80%;
margin: auto;
background-image: linear-gradient(#820, #990);
}

Код: Выделить всё

Правый контейнер прокручивается, как ожидалось, но левый контейнер не расширяется, чтобы соответствовать его содержимому. Более того, при проверке страницы оказывается, что тело также сохраняет высоту области просмотра.
Почему min-height: fit-content не соответствует содержимому? Насколько я понимаю, в этой ситуации height меньше, чем min-height, поэтому min-height должен иметь приоритет.
В качестве альтернативы, когда я удаляю height: 100vh или использую height: fit-content в теле, он расширяется, чтобы соответствовать переполнению как левого, так и правого контейнеров, что нежелательно. Кроме того, левый контейнер соответствует собственному содержимому только тогда, когда тело использует display: flex, но соответствует 100 % высоты тела при использовании display: Grid.
Почему height: 100% не всегда соответствует высоте родительского элемента в элементах flex row?
Как это должно вести себя: высота тела здесь установлена на 2000 пикселей вручную; решение должно учитывать любой размер контейнера содержимое):

Код: Выделить всё

body {
margin: 0;
min-height: 100vh;
height: 2000px;
width: 100vw;
display: flex;
flex-direction: row;
overflow-x: hidden;

background-color: #CCF;
}

#left-container {
width: 40%;

background-color: #030;
color: #FFF;
}

#right-container {
width: 60%;
height: 100%;
overflow: auto;

background-color: #300;
color: #FFF;
}

#left-container div {
height: 2000px;
width: 80%;
margin: auto;
background-image: linear-gradient(#082, #06A);
}

#right-container div {
height: 3000px;
width: 80%;
margin: auto;
background-image: linear-gradient(#820, #990);
}

Код: Выделить всё

Можно ли динамически отображать эти два контейнера так, как задумано, используя только HTML и CSS?

Подробнее здесь: https://stackoverflow.com/questions/798 ... flow-types