I want to make element scrollable if it's content is becoming too large to fit in parent's max-height. The problem is that it overflows parent instead of adding scrollbar.

I know that providing height or max-height in pixels to element would fix the issue but I cannot do that because the height of the element is not known.
Link to the code: https://codesandbox.io/s/scrollable-height-ewfbmo?file=/src/App.js (I want purple section to be scrollable)

CodePudding user response：

So to scroll the purple region:

Just add overflow: auto to the .body class (the parent of the purple region)

I forked your code-sandbox:

https://codesandbox.io/s/scrollable-height-forked-9hvrpy?file=/src/styles.css