带固定aspect-ratio的网格项溢出：弹窗布局优化求助

需求说明 #

• 弹窗尺寸由其子元素决定
• .large子元素需足够大，保证内容可读
• .square子元素需为正方形
• .large与.square元素需等高，保持布局整洁

问题描述 #

当前代码中，为.square设置height:100%后，并未让弹窗自动适配宽度，反而导致该元素溢出弹窗。同时Chrome/Edge与Firefox的显示效果存在细微差异。

原始代码 #

CSS

.popup {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto 1fr;
  grid-gap: 0.5rem;
  
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 1rem;
}

.popup > * {
  background-color: lightblue;
}

.large {
  min-width: 150px;
  width: 50vw;
  min-height: 100px;
  height: 30vh;
}

.square {
  height: 100%;
  aspect-ratio: 1;
}

HTML

<html style="height: 100%">
<body style="height: 100%; margin: 0; position: relative;">
  <div class="popup">
    <div>hi</div>
    <div class="large"></div>
    <div>hello</div>
    <div class="square"></div>
  </div>
</body>
</html>

临时解决方案（不够简洁） #

.popup {
 --large-height: clamp(100px, 30vh, 10000px);
}

.large {
  height: var(--large-height);
}

.square {
  height: 100%;
  width: var(--large-height);
}

优化后的修复方案 #

通过CSS变量统一控制高度基准，结合Grid布局明确行高，既满足所有需求又保持代码简洁：

.popup {
  --content-height: clamp(100px, 30vh, 100%);
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto var(--content-height);
  grid-gap: 0.5rem;
  
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 1rem;
}

.popup > * {
  background-color: lightblue;
}

.large {
  min-width: 150px;
  width: 50vw;
  height: 100%;
}

.square {
  height: 100%;
  width: var(--content-height);
  aspect-ratio: 1;
}

方案说明 #

1. 用--content-height变量统一定义高度基准，通过clamp同时满足最小高度和视口比例要求
2. 将Grid第二行高度设为该变量，确保.large和.square所在行高度完全一致
3. .large通过height:100%继承行高，.square通过width: var(--content-height)保证宽度等于高度，实现正方形效果
4. 弹窗尺寸由子元素自然撑开，符合"尺寸由子元素决定"的需求

内容的提问来源于stack exchange，提问作者Jeanot Zubler