css外部的容器高度如何比实际内容撑开的高度小30px?

Question

代码：https://jsrun.net/diQKp/edit

<div class="box">
    1<hr/>
    2<hr/>
    3<hr/>
    <div class="box2">隐藏区域</div>
</div>
.box{
    height: calc(100% - 30px);
    overflow: hidden;
    background-color: yellow;
}
.box2{
    height: 30px;
    background-color: red;
}

我使用calc(100% - 30px);来实现好像不起作用？

Answer 1

需求有点怪异。可以使用margin负值来实现。
比如你可以给.box2加上：

.box2 {
    margin-bottom: -30px;
}

为啥calc(100% - 30px)不行呢？这里百分数是相对于box的父元素高度来计算的。