I have a website with two kinds of pages:

no page scroll, children handle their scroll (https://codepen.io/Zephir77167/pen/mzymwO?editors=1100)

page scroll, children don't handle their scroll (https://codepen.io/Zephir77167/pen/ePmWja?editors=1100)

The first example works because of this CSS:

.root { height: 100%; /* min-height: 100%; */ }

The second example works because of this CSS:

.root { /* height: 100%; */ min-height: 100%; }

Apart from the .root class, the code is exactly the same. I would like to have the same .root code for both layouts.

This was my initial workaround: https://codepen.io/Zephir77167/pen/BqyMxw?editors=1100

.columns { height: calc(100vh - 120px); }

but vh doesn't work well on Chrome Android and Safari iOS.

Some restrictions :

can't use vh

can't use javascript

html , body , .root , .layout , .content CSS should be the same for both layouts, and both should work as before

Thanks in advance for your help!