父元素设置min-height ,子元素 height:100%无效

<div id="div1">
    <span id="sp1">aaa</span>
</div>

原因： 相对包含块 需要明确高度，子元素百分比才有效, 现在的div1没有明确的高度

什么是相对包含块？

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block

#div1{
     min-height:100px;
     background-color: yellow;
     position: relative;
}
#sp1{
     width: 20%;
     height: 100%;
     background-color: blue;
     position: absolute;
}