I have finally found a solution to the problem, in case someone else experiences the same. It seems that the behavior iterating containers using Tree/Recursive behaves different from iterating containers using Repeat Content. When you set flex layout = vertical on the repeating container using Repeat Content, the next level container can have flex layout = horizontal and still be listed vertically. If you change the repeat logic to Tree / Recursive, the sub container will be listed horizontally even when flex layout = vertically. The solution in case you want the list to be vertically (a tree view/indented list) is to introduce another container between the one with horizontal layout and the iterating container. This container needs to have flex layout = vertically.
There might be a perfectly logical explanation to why this happens but it’s still confusing. The Recursive tree example at Appfarm Showroom uses a different logic and was not of much help in my case.