在元素高度不确定的情况下，如何设置高度css?

Question

我现在的场景是外层盒子高度30px,内层盒子高度不固定，放置不固定文字的描述内容，如何设置内层盒子的高度？
因为我现在在webview中展示，如果设定内层盒子高度为height:auto，会出现获取的内层盒子高度为外层盒子高度的情况。

<div id="outerBox">
    <div id="innerBox">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis nostrum qui sint soluta? Ad consequatur dolor dolore doloribus id, laudantium natus necessitatibus neque perspiciatis possimus quasi reiciendis tempora tenetur veniam?
    </div>
</div>

#outerBox{
    height:30px;
    overflow:hidden;
}
#innerBox{
    height:auto;
}

最终发现了一个大坑，之所以我获取的高度始终为外层盒子的高而不是实际的高，因为我测试的文字内容是一个超级超级长的英文单词，需要在样式中加 word-wrap: break-word;文字才能自动换行。
感谢下面两位热心大佬帮忙写的代码，真的很厉害！！！

Answer 1

样式借用锦鲤的

Answer 2

外层定死了高度， 内层不固定行数。 那么当文字行数超出上限就不要了是吧？
外层盒子在加个 line-height 就好了
demo：
https://codepen.io/a775691134...