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;box sizing
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。