Можно ли прокрутить содержимое div между двумя другими flex-элементами?
У меня есть строка заголовка (#A), прикрепленная сверху, и строка нижнего колонтитула (#C), прикрепленная внизу страницы. Каждый из них имеет фиксированную высоту30px и представлены здесь желтым цветом. Они прикреплены там следующим кодом:display:flex; align-content: space-between;.
Между этими двумя элементами есть красный элемент с содержимым страницы (#B), размер которого больше размера экрана. Моя цель - позволить этому красному div занимать только оставшееся место на экране, сохранять эту высоту и прокручивать его содержимое. Но когда я установилoverflow:scroll полоса прокрутки появляется без эффекта.
Я знаю, что есть и другие возможности для выполнения этого макета, например, таблицы с 3 строками или размещения столбцов сposition:absolute / position:fixed и избавиться отdisplay:flex; но прежде чем перейти к этим альтернативам, я хочу знать, возможен ли текущий сценарий.
body {
margin:0px;
}
#container {
max-width: 100vw;
max-height: 100vh;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: space-between;
align-content: space-between;
}
#A {
width: 100%;
height: 30px;
}
#B {
display:inline-block;
width: 100%;
overflow: scroll;
}
#C {
width: 100%;
height: 30px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<div id=A style="background-color:gold;"></div>
<div id=B style="background-color:tomato;">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div id=C style="background-color:gold;"></div>
</div>
</body>
</html>