I am trying to display a scrollbar in an inner container without specifying a fixed height, while the outer container has a fixed position. However, I am encountering an issue where setting a fixed height for the innerContainer results in content being hidden when adjusting the window height for responsiveness.
// OUTER CONTAINER
<div style={ { width: "250px", zIndex: 5, position: "fixed", right: "2rem" } }>
<div style={ { width:"100%, height: "100px" } }>
// additional content here
</div>
// INNER CONTAINER
<div style={ { width: "100%", height: "400px", overflowY: "auto" } }>
// content inside the container overflows
</div>
</div>
If anyone has a solution for this issue, your assistance would be greatly appreciated. Thank you for your time and help.