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>