É possível rolar um conteúdo div entre outros 2 flex divs?

Question

Feb 09, 2016, 07:15 AM

É possível rolar um conteúdo div entre outros 2 flex divs?

Tenho uma barra de cabeçalho (# A) colada na parte superior e uma barra de rodapé (#C) colada na parte inferior da página. Cada um tem uma altura fixa de30px e são representados aqui pela cor amarela. Eles são colados lá pelo seguinte código:display:flex; align-content: space-between;.

Entre essas 2 divs, há uma div vermelha com o conteúdo da página (#B), que é maior que o tamanho da tela. Meu objetivo é deixar que essa div vermelha ocupe apenas o espaço restante da tela, mantenha essa altura e role seu conteúdo. Mas quando eu definooverflow:scroll a barra de rolagem aparece sem efeito.

Eu sei que existem outras possibilidades para executar esse layout como uma tabela com 3 linhas ou colocar as barras composition:absolute / position:fixed e se livrar dodisplay:flex; mas antes de pular para essas alternativas, quero saber se o cenário atual é possível.

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>