fill-available 在 width 或 height 属性中与 grid 布局或 flexbox 布局一起使用时，可以创建一些有趣的布局效果。它本质上是让元素填满可用空间，与 stretch 类似，但在某些情况下表现不同。
以下是一些 fill-available 的应用场景：
1. Grid 布局中的等高列：
假设你有一个网格布局，希望所有列的高度相同，即使它们的内容长度不同。可以使用 fill-available 来实现：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
height: fill-available; /* 使所有项目高度相同 */
border: 1px solid black;
}
即使每个 .grid-item 的内容高度不同，它们也会占据网格容器的整个高度，从而创建等高的列。
2. Flexbox 布局中的垂直居中：
在 Flexbox 布局中，如果要将一个项目垂直居中于其父容器，可以使用以下方法：
.flex-container {
display: flex;
align-items: center; /* 垂直居中 */
height: 200px; /* 设置容器高度 */
}
.flex-item {
width: fill-available; /* 填满剩余宽度 */
height: fit-content; /* 根据内容调整高度 */
border: 1px solid black;
}
.flex-item 将根据其内容调整高度，并水平填满父容器的剩余宽度，同时保持垂直居中。
3. 与 min-content 和 max-content 结合使用：
fill-available 可以与 min-content 和 max-content 结合使用，创建更灵活的布局。例如：
.container {
width: 300px;
}
.item {
width: fill-available;
min-width: 100px; /* 最小宽度 */
max-width: 200px; /* 最大宽度 */
}
在这个例子中，.item 将尝试填满 .container 的宽度 (300px)，但其宽度会被限制在 100px 到 200px 之间。如果 .container 的宽度小于 100px，.item 的宽度将是 100px；如果 .container 的宽度大于 200px，.item 的宽度将是 200px。
4. 解决 stretch 在绝对定位下的问题：
在某些情况下，stretch 在绝对定位的 flex 项上可能无法正常工作。fill-available 可以作为一种替代方案。
总结:
fill-available 提供了一种灵活的方式来控制元素的大小，使其填满可用空间，同时尊重 min- 和 max- 的限制。它在 grid 和 flexbox 布局中特别有用，可以帮助创建更复杂的响应式布局。 然而，需要注意的是，fill-available 的浏览器兼容性不如其他一些属性，尤其是在旧版浏览器中。 所以在使用前需要考虑兼容性问题。 可以使用 width: -webkit-fill-available; 来增强兼容性，但这也不是所有浏览器都支持的。 现在更推荐使用stretch，因为它兼容性更好。