How to make content disappear when scrolling underneath the "header" area? Is there an example of this?

So I have a UX problem to solve -

Here's an example of the issue:

As you can see, the message steps are nested underneath the folder. In order to view all of them, you would have to scroll from top to down and left to right.

Here's what I was thinking of how to solve this problem:

In the image, the first picture represents what it would look like when you have the folders collapsed. The user clicks on the first folder for a couple seconds and then is transferred to a different screen where each of the steps are larger. When the user scrolls, they would only scroll from top to bottom, and the steps would "dissapear" under the header/folder area. All the steps would be at the same length and indentation, it's just the content that's within them that would change. To show that the steps are scrollable, the last one would be set to a lower opacity. In order to return to the first screen, the user would simply click on the folder for a couple seconds.

What do you guys think? Is this feasible? Is there another way to workaround this problem?