I have a header bar(#A) sticked on top and a footer bar(#C) sticked on the bottom of the page. Each one have a fixed height of 30px
and are represented here by the
Maybe you are trying to achieve something like this:
html { height: 100%; min-height: 100%; }
body { height: 100%; min-height: 100%; margin: 0; }
#container {
display: flex;
flex-direction: column;
height: 100%;
}
#A { flex: 0 0 30px; }
#B { flex: 1 1 auto; overflow: auto; }
#C { flex: 0 0 30px; }
http://codepen.io/simoncereska/pen/xZQPXQ
I think this is what you wanted? If so, you have a column flow (up and down) so flex-direction: column
you should use instead of row
(that's default).
body {
margin: 0px;
padding: 0;
}
#container {
max-width: 100vw;
max-height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
align-content: space-between;
}
#A {
width: 100%;
min-height: 30px;
}
#B {
width: 100%;
height: calc(100% - 60px);
overflow-x: scroll;
overflow-y: hiden;
margin: auto;
}
#C {
width: 100%;
min-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>