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

[Anonymous]

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

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

Test

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

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);
}

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

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