Is it possible to scroll a div content between another 2 flex divs?

Question

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

Answer 1

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;
}

  

    

    

      text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text
      
text