具有固定纵横比的溢出网格项

Question

我对弹出窗口有以下要求：

弹出窗口的大小由其子窗口定义。
```
large
```
子级需要相当大，以确保内容实际上可以被阅读。
```
square
```
孩子只需是正方形即可。

我还想让它们的高度相同，这样看起来更干净。

但是，在下面的代码片段中，设置

height: 100%

不会使弹出窗口变宽，它只会使方形项目溢出弹出窗口。我该如何解决这个问题？

.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%;
  
}

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

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

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

<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);
}

Answer 1

很难理解你的最终目标，但我假设你希望 square 成为

.square

并且与

<div>hello</div>

具有相同的宽度：

.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%;
  
}

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

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

.square {
  min-width: 0; /* <-- */
  aspect-ratio: 1;
}

<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>

具有固定纵横比的溢出网格项

问题描述投票：0回答：1

1个回答

最新问题

具有固定纵横比的溢出网格项

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1