-webkit-fill-available 关键字

-webkit- 前缀：浏览器厂商会在 CSS 属性或值前加一个私有的前缀来支持新属性，带有此前缀的属性或值能够在以 WebKit 为内核的浏览器中正常使用。以 WebKit 为内核的浏览器代表有 Safari 和 Chrome。

fill-available：它会自动计算元素的宽度和高度，使元素的尺寸撑满其父元素的可用空间，这个属性通常用于解决某些布局问题。

下面是一个使用 -webkit-fill-available 来实现元素填充父元素的剩余空间的例子：

1
2
3
4
5
6
7
8
9
10
11
12

.parent {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  display: flex;
}

.child {
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  background-color: #f0f0f0;
}

需要注意的是，-webkit-fill-available 是一个非标准的属性，一般情况下不建议使用非标准的或私有的 CSS 属性值，因为它们可能不被不同浏览器所支持，导致兼容性问题。

可以考虑其他方案的实现:

1
2
3
4
5
6
7

.parent {
  display: flex;
}

.child {
  flex: 1;
}

查看效果