当父元素包含高度时，CSS calc（）不起作用：100％

Question

以下是我的代码：

<div class="box">
    <div class="test"></div>
</div>

.box {
    height: 100%;
    width: 100px;
    background: red;
}

.test {
    background: blue;
    height: calc(100% - 47px);
}

当我设置高度：100％然后calc（）无法正常工作。但是当我设置高度：500px时，calc（）工作正常。

怎么可能？我该如何解决这个错误？