Scroll scaling inside a block?

Question

css

The site has a block (represented in red) that expands as needed. And when it is opened, the scroll of the lower block flies beyond the limits of all content and disappears, this can be seen if you scroll to the end. How would you fix this? Preferably without js, but you can use it if there is no other way.

jsfiddle.net/bxpyqfnL Thanks

in advance for your help!

Answer 1

1. Do not put styles on the body, zeroing the indent → maximum. This hack is a shot in the foot when used thoughtlessly. Especially overflow:hidden;
2. Use absolute/fixed positioning for the red block.
3. Use a flexbox wrapper that spreads the content of the page body into a red box and the rest with flex-grow:[1 or more] across the page.
4. Or it’s trivial to remove shots in your legs in this way .