Ana*_*nab 6 css viewport-units responsive
是否有一个 CSS 相当于相vmin对于父元素而不是视口的较小尺寸？
我有一个左侧有导航面板的页面，因此只有部分视口宽度可用于主要内容，并且我试图拥有一个不会从 main 溢出的响应式正方形<div>。我找到了响应式方块的代码作为这个问题的答案，但是在横向模式下，方块的高度会溢出。
我可以使用 JavaScript 通过侦听窗口大小调整来重新计算正方形的宽度作为父级宽度和高度之间的最小尺寸，但在我的实际网站中，父级大部分时间都在，display: none因此它没有宽度，我想避免当它出现时需要重新计算尺寸。
这是一个 JsFiddle，其中包含突出问题的示例和背景： https: //jsfiddle.net/wy874pqv/4/。下面是我使用的代码。
HTML：
<body>
<div id="main">
<div class="wrapper">
<div class="one-by-one aspect-ratio"></div>
<div class="content">
<div class="circle">
</div>
</div>
</div>
</div>
<div id="leftPanel">
</div>
</body>
CSS：
body {
height: 100vh;
padding: 0;
margin: 0;
}
div#leftPanel {
height: 100%;
width: 20%;
position: absolute;
left: 0;
margin: 0;
background: red;
}
div#main {
height: 100%;
width: 80%;
position: absolute;
right: 0;
margin: 0;
background: yellow;
}
.wrapper {
position: relative;
width: 100%;
background: rgba(0, 255, 0, 0.3);
}
.one-by-one.aspect-ratio {
padding-bottom: 100%;
}
.wrapper > .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10%;
}
.circle {
position: relative;
height: 100%;
border: dashed 1px;
border-radius: 50%;
}