如何实现 div 块高度的动态计算？

Question

我是 CSS 和 HTML 布局的新手。我遇到了一些问题。 如何实现 div 块高度的动态计算？ 在我的示例中存在两个嵌套的 div 块。包含可以具有不同大小的图例的包装器和内容块。我需要，如果图例的大小更多的包装块，滚动条出现，否则不会。 我怎样才能达到它？通过 CSS 或 JS 等。 我试着写这样的东西，但是这段代码绑定到恒定的块大小。如果内容大小超过嵌套块，滚动条无助于查看隐藏内容。另外我不得不说我使用 Amcharts 框架来生成图表 https://imgur.com/FaJ9NAo这里可以看到代码的结果（对不起，我没有以正确的方式附上图片的声誉）

#chartdiv{ /*Some chart block*/
    width: 76%;
    height: 500px;
    float: left;
}
#chartlegenddiv { /*Legend content block*/
    height: 280px; /* need auto computing here */
}

#chartlegendwrapper { /*Legend wrapper block*/
    width: 14%;
    height: 200px;
    float: right;
    overflow-y: auto;
}

Answer 1

#chartdiv{ /*Some chart block*/
    width: 76%;
    height: 500px;
    float: left;
}

#chartlegendwrapper { /*Legend wrapper block*/
    width: 14%;
    max-height: 70px;
    float: right;
    overflow-y: auto;
}

<div id="chartlegendwrapper"><div>1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
</div></div>

您可以从#chartlegenddiv 中删除height。 还要在#chartlegendwrapper 上用[max-height][1] 替换height。

没有高度与height: auto相同。

From MDN:

浏览器会计算并选择指定元素的高度。