In a nutshell, I'm dealing with 3 elements:
<div>
<Header/>
</div>
<div>
<Body/>
</div>
<div>
<Footer/>
</div>
The header has a fixed height.
The body is an accordion that should expand with a scroll bar when necessary.
The footer is also an accordion that can either show its full content or just the header.
My goal is to always display the header in full, allow the footer to display as needed, and have the body expand with a scroll bar as necessary.
Here are the styles I've implemented:
Container: {
height: '100%',
minHeight: '100%',
display: 'flex',
flexDirection: 'column'
},
SectionContainer: {
flex: '1',
display: 'flex',
flexDirection: 'column',
position: 'relative'
},
bodyAccordion: {
overflowY: 'auto'
},
footerAccordion: {
position: 'absolute',
bottom: '0px',
right: '0px',
left: '0px'
}
Given the complexity of the actual HTML, here is a simplified version:
<div className={Container}>
<MyHeader/>
<div className={SectionContainer}>
<div className={bodyAccordion}>
<MyAccordion/>
</div>
<div className={footerAccordion}>
<MyFooterAccordion/>
</div>
</div>
</div>
But when the code is executed, the bodyAccordion overflows into the footerAccordion instead of triggering a scrollbar.
For a visual demonstration of the issue, check out this jsFiddle: https://jsfiddle.net/jackyFrosty/mwz62bh9/2/