html css tree vertical alignment (using flex, row, flex-start)

This is a django + html, css and very minimal or no JS question of a Tree display using nested UL/LI

• (so far) have found out already the work of displaying tree vertical/horizontal is done,
• (current issue) aim is to display a dynamic tree or static tree using nested UL in multiple format or options for the end-users with different options (they may choose for easier visualization) like vertical tree, horizontal tree and goal on the left side or right side. so far those are achieved
• currently the issue in working on the following to display vertically aligned horizontal tree with flex, and unable to succeed with the display as the wrap of the one tree path is making some impact on the next connectors (still trying to figure out which css selector and associated property will help to clear the gap)

Please find the attached screen shot and also the code

enter image description here

Latest Results Screenshot enter image description here

CSS code:

<style>
    body {
        padding-top: 10px;
    }
    
    .tree {
        list-style: none;
    }
    
    .tree,
    .tree * {
        margin: 0;
    }
    
    .tree li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: relative;
        padding-left: 2vw;
    }
    
    .tree li::before {
        content: '';
        position: absolute;
        align-items: center;
        left: 0;
        top: 10%;
        border-top: 4px solid rgb(42, 165, 97);
        width: 2vw;
    }
    /* ========================================================= */
    
    .tree li::after {
        content: '';
        position: absolute;
        align-items: flex-start;
        left: 0;
        top:10%;
        margin-bottom: 2px;
    }
    
    .tree li:not(:only-child):after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 10%;
        margin-top: 0px;
        margin-bottom: 2px;
        border-left: 3px solid rgb(172, 206, 20);
    }
  
    /* ========================================================= */
    
    .tree li:last-of-type::after {
        height: 50%;
        top: 0;
    }
    
    .tree li:first-of-type::after {
        height: 50%;
        bottom: 0;
    }
    
    .tree li:not(:first-of-type):not(:last-of-type)::after {
        height: 100%;
    }
    
    .tree ul,
    .tree ol {
        padding-left: 2vw;
        position: relative;
    }
    
    .tree ul:not(:empty)::before,
    .tree ol:not(:empty)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8%;
        border-top: 4px solid red;
        width: 2vw;
    }
    
    
    .tree span {
        border: 1px solid;
        text-align: center;
        padding: 0.33em 0.66em;
        background-color: yellow;
        color: blue;
    }
    
    .tree>li {
        padding-left: 0;
    }
    
    .tree>li::before,
    .tree>li::after {
        display: none;
    }
    
    ol,
    ul {
        counter-reset: section;
    }
    
    li span::before {
        counter-increment: section;
        /* content: counters(section, ".") " "; */
        font-family: monospace;
    }
    
    body {
        /* display: flex; */
        justify-content: center;
        align-items: center;
        height: 100%;
    }

from Recent Questions - Stack Overflow https://ift.tt/3rS6F2i
https://ift.tt/eA8V8J