CSS:flex-grow保持垂直纵横比

我正在创建一个带有圆形菜单的网站。该网站的内容应该适合所有的主页，而不需要滚动。菜单需要填满主页上的剩余空间。但是，我不确定如何在使用

flex-grow:1

填充主页上剩余空间的同时保持圆圈的形状。有没有一种方法可以用纯CSS实现这一点？将菜单设置为设置的视口大小是不可接受的，它需要填充剩余空间。我没有运气使用传统的

填充顶部：100%

来保持纵横比。这个圆不是很圆，它占据了剩余空间的两倍

正文{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
保证金：0；
}
#头衔{
字体大小：30px；
}
#圈{
背景：黑色；
边界半径：50%；
柔性生长：1；
填充顶部：100%；
}
#页脚{
背景：黑色；
颜色：白色；
}

标题
航行
页脚

将圆圈div放入HTML中的包装div中：

<div id="circle-wrap">
  <div id="circle"></div>
</div>

正文{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
保证金：0；
}
#头衔{
字体大小：30px；
}
#环绕{
柔性生长：1；
}
#圈{
背景：黑色；
边界半径：50%；
填充顶部：100%；
}
#页脚{
背景：黑色；
颜色：白色；
}

标题
航行
页脚

老实说，我不确定有没有不设置明确尺寸的方法，因为无法确定它在任何给定点的高度。如果你知道所有其他元素的高度，你可以用

calc

设置一个显式的

height

/

width

，不幸的是，还有另一个菜单，没有包含在这个示例中，它的文本将根据屏幕宽度进行换行。我不相信

max content

得到广泛支持？是吗？看起来如果我用对了关键词，除了IE之外，每个浏览器都可以正常工作，但是有一个缺点就是切断了我的菜单项。更奇怪的是，删除

宽度：最大内容
并用
填充：0%
替换它可以达到同样的效果。不起作用，因为
内部高度
并不总是与
内部宽度
成比例。在浏览器中测试它。此外，您发布的演示中的圆圈始终保持相同大小。我假设它应该是响应的，因此没有明确的维度
#circle-wrap {
  flex-grow: 1;
}