如何实现行内元素高度跟随主元素，超长内容自动滚动

现有如下HTML代码：

<div style="display: flex; flex-direction: row;">
<div id="important" style="min-width:400px">important important important important important important important important important important important important important important important important important important</div>
<div id="unimportant" style="overflow-y:scroll">unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant </div>
</div>

需求：当#unimportant的内容高度超过#important时，#unimportant激活纵向滚动，且高度始终与#important保持一致。

可以仅用纯CSS实现，核心是利用Flex布局的交叉轴特性结合高度限制，修改后的代码如下：

<div style="display: flex; flex-direction: row;">
<div id="important" style="min-width:400px; flex: 0 0 auto;">important important important important important important important important important important important important important important important important important important</div>
<div id="unimportant" style="overflow-y: auto; flex: 1; height: 0; min-height: 100%;">unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant unimportant </div>
</div>

实现原理： #

• 给#important设置flex: 0 0 auto，确保它的宽高完全由自身内容决定，不会被Flex布局伸缩调整；
• 给#unimportant设置flex: 1让它占据父容器剩余宽度，通过height: 0打破自身内容对高度的撑开作用，再用min-height: 100%强制它的高度与#important保持一致（Flex布局默认align-items: stretch，子项会在交叉轴方向拉伸至与最高子项同高，此处最高子项为#important）；
• overflow-y: auto保证当#unimportant内容高度超过限制时，自动激活纵向滚动。

如果不使用这类技巧，常规纯CSS确实难以直接实现“以另一元素内容高度为自身高度上限”的效果——因为CSS本身无法动态获取并引用其他元素的实际渲染高度值，但借助Flex布局的特性配合高度限制的小技巧，就能达成需求。

内容的提问来源于stack exchange，提问作者Wynell