CSS中width:fill-available和width:100%的区别？

Question

CSS中width:fill-available和width:100%的区别？

Answer 1

简单一点来理解的话，就是fill-available会尽可能占用剩下的可用空间，但一旦跟padding/margin结合一起使用的时候，width:100%会撑破布局，而width:fill-available却不会。

给你举个例子：

<div class="parent">
    <div class="child">
        这里设置了padding跟width:100%的时候会撑破外层，但fill-available不会
    </div>
</div>

.parent {
  width: 300px; 
  outlien: 1px dashed #f00;
}

.child  { 
  background: #000;
  width: 100%;
  width: fill-available;
}

所以总结一下，fill-available是智能计算剩下可用空间，如果没有padding/margin等其它属性干扰，等同于100%，但若有属性干扰，那就会智能计算。