父母的身高是孩子的两倍吗？

Question

我正在尝试创建一个“时间轴”效果，使候补孩子坐在绝对定位线的上方/下方（参见图片）。下面的代码在某种程度上可以正常工作，但是它依赖于在父#events上设置高度（我不想这样做-只希望它适合内容）。

是否有一种方法可以迫使#events达到其子代的高度，同时保持将#event div放在#line上方/下方的能力？

HTML             

    <div id="event" class="top">                        
        <div id="text">
            <h4 class="label">Step 1</h4>
        </div>
    </div>

    <div id="event" class="bottom">                        
        <div id="text">
            <h4 class="label">Step 2</h4>
        </div>
    </div>

    <div id="event" class="top">                        
        <div id="text">
            <h4 class="label">Step 3</h4>
        </div>
    </div>

    <div id="event" class="top">                        
        <div id="text">
            <h4 class="label">Step 4</h4>
        </div>
    </div>                    
</div>

CSS

#events {
    display: flex;
    justify-content: space-evenly;
    height: 75vh; // DO NOT WANT THIS

    // Line
    #line {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        background-color: $black;
    }

    // Event
    #event {
        position: relative;
        display: flex;
        height: 50%;
        max-width: 15%;

        // Create line to join timeline
        &:after {
            content: '';
            position: absolute;
            left: 50%;
            width: 1px;
            height: 30px;
            transform: translateX(-50%);
            background-color: $black;
        }

        // Alignment
        .top {
            background: blue;
            align-self: flex-start; // Position above #line
            align-items: flex-end; // Align content to bottom
            flex-direction: column; // Image over text
            padding-bottom: 55px; // Height on joining line plus margin

            // Position line to join timeline
            &:after {
                bottom: 0;
            }
        }
        .bottom {
            background: green;
            align-self: flex-end; // Position below #line
            align-items: flex-start; // Align content to top
            flex-direction: column-reverse; // Text over image
            padding-top: 55px; // Height on joining line plus margin

            // Position line to join timeline
            &:after {
                top: 0;
            }
        }
    } 
}