Как обеспечить 100% высоту страницы с помощью аккордеонов ⇐ Javascript

[Anonymous]

У меня есть 3 div. div 1 имеет фиксированную высоту, div 2 и div 3 расширяются, и одновременно можно расширять только один.
Я хочу, чтобы все три div были всегда видны.
Если содержимое div 2 длинное, станет видимой полоса прокрутки.

Если содержимое div 3 длинное, появится полоса прокрутки, но высота трех div будет максимум занимать высоту доступного screen.
Что я пробовал:
Сейчас у меня есть JavaScript для чтения высоты документа и установки высоты развернутого аккордеона при его раскрытии.
Есть ли способ справиться с этим в CSS?

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

html,
body {
height: 100%;
margin: 0;
}

.fixed {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
justify-content: center;
}

.accordion-container {
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
}

.accordion {
flex: 1;
/* accordion fills remaining space */
display: flex;
flex-direction: column;
}

.accordion-item {
/* remove flex:1 here */
display: flex;
flex-direction: column;
}

.accordion-collapse {
flex: 1;
/* only expanded collapse takes space */
display: flex;
flex-direction: column;
}

.accordion-body {
flex: 1;
overflow-y: auto;
}

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

Div 1 (Fixed Height)





Div 2




Lots of content here...
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Keep adding more lines to test scrolling.

Line 20
Line 30
Line 40
Line 50
Line 20
Line 30
Line 40
Line 50
Line 20
Line 30
Line 40
Line 50






Div 3




Content for Div 3.
It can also scroll if long.

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