强制列高度和滚动

Question

考虑两列nav和menu。我希望menu的高度始终等于nav。

如果高度（menu）＆gt;高度（nav），menu内容应该是可滚动的。

如果高度（menu）＆lt;高度（nav），menu（或其background-color）仍应与nav的高度相匹配。

编辑： menu的高度可能会有所不同。 nav中的内容/项目已修复。因此，理论上可以提前将所有元素高度和线高加起来并固定其高度。

1）如果nav身高未知，是否可以采用解决方案？

2）如果（1）不可能，最好将线高/元素高度相加以预先确定nav的高度？

我一直在努力解决这个问题。我已经阅读了解决方案（link1，link2，link3）来解决相等列高的问题 - 但它不一样。这些情况不涉及滚动。

感谢您的帮助。

html, body, nav, menu {
    margin: 0;
    padding: 0;
    border: 0;
}
#container {
  border: 1px dotted black;
}
nav {
  float: left;
  width: 100px;
  height: 200px;
  background-color: #3F51B5;
}
menu {
  width: 150px;
  height: 500px;
  background-color: #C5CAE9;
  overflow: scroll;
}

<div id="container">
    <nav></nav>
    <menu></menu>
</div>