假设你有一个max-width of 600px的容器，现在假设viewport大于600px，比如900px，你怎么把width设置为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，但是如果你不知道总宽，你怎么扩展到剩余空间的20%而不设置父级的flex呢？
1条答案
按热度按时间9o685dep1#
如果我理解正确的话
和/或
%代替wv，并且没有@media。第3个参数100 vw-避免移动的@超出屏幕”。
这是因为我知道每次的全宽都是100 vw，但是如果你不知道总宽，你怎么扩展到剩余空间的20%而不设置父级的flex呢？
Container queries尚未得到广泛支持，但将添加获取CSS所需容器宽度的功能，如
cqw。