'Split screen in nested panels (Angular)

I want to dynamically split the panels in half, either vertically or horizontally, depending on which of the two buttons is clicked.

Right now, I am using position absolute to align the panels, calculating the top and left of each new panel according to the ones before it. But as you already guessed, this not scalable and I have problems when I change the resolution.

When I tried using flexbox I had problems when splitting the panels horizontally.

Is there any way I can achieve something like in the picture below?

enter image description here

htmlcssangularangularjsangular-material


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions