flex 子元素和父元素的高度相同問題

今天，遇到了一個超級坑的問題，解決了超級久沒找到解決方法，各類百度，終於在茫茫的答案中找到了，太不容易了，淚奔~~

所以趕忙在這裏記錄下！！！！！

問題：一級父元素採用flex佈局，可是沒有設置高度，他有三個子元素，父元素的高度是有第三個子元素的高度撐開的，如今的狀況是，須要讓第一個子元素的高度和父元素同樣高，可是如今若是是設置第一個子元素的高度爲100%,是不會生效的

解決：設置子元素相對於父元素絕對定位，高度設置爲100%,完美解決~over

 

.flow-item{
    
         position: relative;
         padding: 0.1rem 0.15rem 0 0.65rem;
         width: 100%;
         box-sizing: border-box;
         
         &:first-child {
             padding-top: 0;
         }
        .timeline-item {
            position: absolute;
            top: 0;
            left: 0.75rem;
            @include flexBox();
            flex-direction: column;
            height: 100%;
            justify-content: center;
            align-items: center;
            .line {
                flex: 1;
                display: inline-block;
                width: 1px;
                background: #dedede;
            }
            .dot {
                display: inline-block;
                width: 0.14rem;
                height: 0.14rem;
                border-radius: 50%;
                background: #dedede;
            }
            
            &.active {
                left: 0.65rem;
                .line {
                    background: #25ae5f;
                }
                .dot {
                    display: inline-block;
                    width: 0.24rem;
                    height: 0.24rem;
                    border: 0.05rem solid #b9e5cc;
                    border-radius: 50%;
                    background: #25ae5f;
                }
            }
        }
        .flow-right {
            margin-left: 0.7rem;
            padding-bottom: 0.2rem;
            color: #999;
            border-bottom: 1px solid #f1f1f1;
            span {
                font-size: 0.24rem;
                margin-top: 0.12rem;
                
            }
            
            &.active {
                color: #25ae5f;
            }
         }
    
}

<ul>
                            <li class="flow-item">
                                <div class="timeline-item">
                                    <span class="line"></span>
                                    <span class="dot"></span>
                                    <span class="line"></span>
                                </div>
                                <div class="flow-right" :class="[index == 0 ? 'active': '']">
                                    <p>2019-04-17</p>
                                    <p>123</p>
                                    <p>234</p>
                                </div>
                            </li>
</ul>