根据剩余空间缩放宽度而不将父元素设置为 flexbox？答案

【问题标题】：scale width according to remaining space without setting parent element to flexbox?根据剩余空间缩放宽度而不将父元素设置为 flexbox？
【发布时间】：2023-02-09 23:13:38
【问题描述】：

假设您有一个带有 max-width of 600px 的容器。现在假设视口大于600px，例如900px。你如何将宽度设置为600px plus 20% of the remaining space (so 20% of the 300px in this case)？

所以基本上是flex-basis: 600px和flex-grow: 0.2。

以下解决方案有效：

.container {
  max-width: 600px;
}

@media (min-width: 600px) {
  .container {  
    width: calc(600px + ((100vw - 600px) * 0.2));
  }
}

那是因为我知道全宽每次都是 100vw。但是，如果您不知道总宽度怎么办，如何在不对父级设置 flex 的情况下缩放以增加剩余空间的 20%？

【问题讨论】：

我认为使用 100% 而不是 100vw 应该适用于您的情况。
请发布一个最小示例 - 这包括您的 HTML。
@ShakyaPeiris 当然，我多么愚蠢......
无论你有什么宽度，你都不能大于最大宽度

标签： css

【解决方案1】：

如果我正确理解问题

.container { 
  width:max(600px, calc(600px + (100vw - 600px) / 5), 100vw);
}

和或%而不是wv，并且没有@media。

第三个参数 100vw - 避免移动@out of screen”。

那是因为我知道全宽每次都是 100vw。但如果你不知道总宽度怎么办，你如何缩放以增长 20% 没有在父级上设置 flex 的剩余空间？

Container queries 尚未得到广泛支持，但会添加获取容器宽度以满足 CSS 需求的能力，如 cqw。

【讨论】：