Ist es möglich, einen Div-Inhalt zwischen zwei weiteren Flex-Divs zu scrollen?

Question

Feb 09, 2016, 07:15 AM

Ist es möglich, einen Div-Inhalt zwischen zwei weiteren Flex-Divs zu scrollen?

Ich habe eine Kopfzeile (#A) oben und eine Fußzeile (#C) unten auf der Seite. Jeder hat eine feste Höhe von30px und werden hier durch die gelbe Farbe dargestellt. Sie sind dort mit folgendem Code gekennzeichnet:display:flex; align-content: space-between;.

Zwischen diesen 2 Divs gibt es ein rotes Div mit dem Seiteninhalt (#B), der größer als die Bildschirmgröße ist. Mein Ziel ist es, dass dieses rote Div nur den verbleibenden Bildschirmbereich einnimmt, diese Höhe beibehält und seinen Inhalt scrollt. Aber wenn ichoverflow:scroll Die Bildlaufleiste wird ohne Auswirkung angezeigt.

Ich weiß, dass es noch andere Möglichkeiten gibt, dieses Layout wie eine Tabelle mit 3 Zeilen auszuführen oder die Balken mit @ zu platziereposition:absolute / position:fixed und das @ loswerddisplay:flex; aber bevor ich mich auf diese Alternativen stürze, möchte ich wissen, ob das aktuelle Szenario möglich ist.

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>