如何达到 div 块高度的动态计算

Question

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

#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。同时将height替换为#chartlegendwrapper上的[max-height][1]。

没有高度与height: auto相同。

来自 MDN：

浏览器将为指定元素计算并选择高度。