在CSS中创建一个正方形，占据容器的剩余空间

我想做一个正方形的div，它占据了容器的剩余大小。如何使用CSS实现这一点

具体地说：

使div具有1:1的纵横比（也称为正方形）

将divs width&height=设置为空间较小的尺寸

这里有一张图片可以清楚地说明这一点：

注意： 我知道答案和方法是使用容器组件，底部填充

：100%。这不是一个可接受的解决方案，因为它失败了#2（不会根据约束正方形的维度进行切换）

无效的解决方案：


仅使用flex：
使用flex和纵横比容器：
您可以在（
max-
）
宽度
/
高度
之间的
calc（）
和
vh
单元之间进行中继


标题{
背景：粉红色；
高度：150像素；
}
标题，.squarred{/*使用flex进行居中，可选*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：；
}
斯夸雷德先生{
宽度：calc（100vh-150px）；/*运气：收割台有固定高度，请将其移除*/
最大宽度：100vw；/*保持在窗口内*/
最大高度：100vw；/*保持在车窗内*/
保证金：0自动；
弹性：1；
溢出：自动；/*可用*/
背景：绿松石；
}
html，body{/*设置框架*/
保证金：0；
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
标题
我是一个正方形
我占据了剩余的空间

如果填充失败，您可以共享您的HTML结构和迄今为止使用和尝试过的CSS。一个截图是无用的，但要做的工作。。。。。我有一个答案。。。这是可行的，但不知道你在哪里失败了，我会在哪里帮助你，而不是做你的工作；）？G-Cyr，我在问题中解释了填充失败的原因。它只允许您基于一个维度设置纵横比（宽度或高度）。@G-Cyr-我不认为添加一个在HTML中只有两个div的JSFIDLE会有什么帮助。类似地，在HTML中添加一个带有两个div的JSFIDDL和一个不起作用的CSS解决方案也没有什么帮助，因为它只在一个维度上进行约束（涉及calc和vh）有趣-接受它。你能想出一种不需要神奇的150px（页眉大小）的方法吗？你需要javascript动态获取页眉的高度来更新square的高度，我认为这样更好；）此处标题的内容不应超过150px。它可以在小型设备上包裹和溢出。