使div尽可能大，保持纵横比并在其周围放置其他div

Question

我在div中有一个SVG元素。我想不要扭曲这个svg，但要尽可能大，不要超过屏幕的高度或宽度。然后我想使用剩余的空间（顶部和底部或侧面，取决于窗口的纵横比）来放置其他元素。

根据我的阅读，我需要使用max-height：100vh，但由于某些原因，这只适用于SVG本身，如果它不在div内。

我目前拥有的CSS如下：

#svgdiv {
    max-width: 100%;
    max-height: 100vh;
    display: block;
    margin: auto;
    top: 0px;
}
#otherdiv {
    float: left;
}

据我所知，这导致唯一不受欢迎的功能是max-height运行不正常，因为它正在扩展到比屏幕更高。