Angular 12 Expansion Panel and keep total height fix at 100 vh

Question

I have a question regarding a website layout. I want to keep total height fixed at 100vh no matter whether section B, which is made of Angular Expansion Panel (I am using angular 12), is expanded or collapsed. In this way, section C might have a scroll bar (which I think it should be). However, even though section C is given with overflow-y: auto, the final outcome didn't meet what I expected. Can someone help me fix this problem?

picture to show

sample code to show on StackBlitz

Answer 1

You can make use of flex capabilities to meet requirements:

.section {
  ...
  display: flex;
  flex-direction: column;
}

.section-C {
  // height: 800px; <-- remove this
  flex: 1;
  overflow-y: auto;
}

Forked Stackblitz