有最小高度的父盒子里面的子元素不能继承高度

有最小高度的父盒子里面的子元素不能继承高度

现象：对父元素使用 min-height 为 300px，在子元素不脱离文档流的情况下，对子元素设置为 30%，但实际显示的时候，子元素的 height 是 0。

当你让一个元素的高度设定为百分比高度时，是相对于父元素的高度根据百分比来计算高度。当没有给父元素设置高度（height）时
，浏览器会根据其子元素来确定父元素的高度，所以当无法根据获取父元素的高度，也就无法计算自己高度。

原因：webkit 的 bug，有最小高度的父盒子里面的子元素不能继承高度

原文链接 🔗

解决：

• 在最外面包裹一层 div，设置为 flex 弹性布局，利用的是弹性盒子默认拉伸高度。

<div class="box-outer">
    <div class="box-inner">
        <div class="content"></div>
    </div>
</div>

.box-outer {
    display: flex;
}
.box-inner {
    width: 100px;
    min-height: 300px;
    background: #cccccc;
}
.content {
    width: 60px;
    height: 30%;
    background: red;
}

• 给父元素加绝对定位，然后子元素加相对定位，这样子元素的高度就会根据父元素的高度进行计算。

<div class="box-inner parent">
    <div class="content child"></div>
</div>

.box-inner {
    width: 100px;
    min-height: 300px;
    background: #cccccc;
    position: relative;
}
.content {
    width: 60px;
    height: 30%;
    background: red;
    position: absolute;
}

点击我查看 demo 效果