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