css 内容使用scale缩小 外层高度如何相应缩小

Question

<div>
    <div
       style="height: 500px;transform-origin: left top;transform: scale(.8);"
     >
        12313
    </div>
</div>

以上代码 如果没有 transform: scale(.8); 外层div的高度是500px

但加上scale以后 内容高度明显小于500 但外层div的高度依旧是500

我想让外层div的高度跟随内容高度

Answer 1

除了JS计算好像并无良策，毕竟transform不改变布局，其在文档中的占位保持不变，也正是这个原因使得它在动画中更高效。