在我们前一工作迭代里有一处跑版的样式问题，如下图：
其代码结构及关键属性如下所示
在修复此缺陷时，初版使用了width：fill-avaliable属性，先前对此属性应用较少，借此机会深入了解一下width相关的关键字。
历史渊源
对于css2，css3新增了几个关键字，如：fill-available,max-content,min-content,fit-content。貌似新增，实际则更像是对于已存在于css2中同款效果的官方赐名。譬如：
块级元素的默认填充一整行，这种充分利用空间的行为就可以称之为fill-available；
inline类元素的典型特性就是元素大小由内容撑开，这种渲染展示行为就可以说是fit-content；
在table中，当table-layout设置为auto时，很容易就会碰到单元格内（中文字体）一字一行的情况，每个字都被断为一行，此种行为就可称之为min-content；
在给元素设置有宽度值，同时又设置有white-space（或者连续的字母、数字）时，元素内容就会超出宽度限制，此时行为就神似max-content，即内容撑开。
细数关键字
fill-available
基础
此属性简单的说就是，使用该属性值的宿主元素尽可能的填充可用区域。如下图代码展示：
此属性的最大价值在于不变更当前display属性前提下，应用其他display属性值的特性。即，在inline-block状态下，使元素具有block元素延伸占据可用空间的特性。
可用，可理解为内容区域。
fill- available 🆚 100%
如上所述，fill-available可以使inline-block元素像block元素那样占据剩余空间，width：100%同样可以做到，这其中有什么区别呢？如下所示
width：100% 会使用全部宽度，而 fill-available 则仅仅使用父元素提供的可用内容宽度（即不含 padding 、 boder 、margin）。
我们工程内部盒模型样式已重置为
border-box，通常不会出现上图所示宽度100%击破布局的问题。
当不存在padding、boder、margin时，即便是默认盒模型下，100%与fill-available的视觉是没有差异的。
总结：
fill-available会尽可能占用余下可用空间。
没有padding、border、margin时，fill-available和100%一样。
min-content
min-content并不是简单的指最小的宽度，而是以内部元素里最小宽度值最大的那个元素的宽度作为容器的宽度。看下面这个例子：
如上图所示，父容器的宽度最终取决于one的宽度，为150px。因为对于每一个汉字文本，其排列布局默认是超出时自动断开换行的，等同于说，文本元素的最小宽度为每个独立文本的宽度。如果将汉字布局属性改为不换行或者长编码、数字，则又是另一番景象：
如上图所示，设置了不换行之后，min-content的取值变成了第三个子div的视口宽度，此前one设置的150px则在三个子div最小宽度里只能排第二了。
如上图所示，第三个子div的内容替换成了一串长字符串，，基于渲染时默认的断字换行策略，最小宽度变成了可容纳长字符串的最小宽度，即长字符串的宽度。
要明白这里的“最小宽度值”是什么意思。
替换元素，例如图片的最小宽度值就是图片呈现的宽度;
对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行,所以，最小宽度可能就是里面最长的英文单词的宽度。
除了上述单纯的min-cnotent的例子，我们也可以看下此属性与inline类属性的对比，更直观：
max-content
max-content直白的讲，内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求，如下图：
可理解为采用了子元素内容宽度最大的那个元素的宽度值，但是它潜在的存在一个特性更像是设置了white-space：nowrap一样。如下图所示：
总结：
内容没有超出宽度时，最终宽度为内容宽度；
内容超过父级允许的行宽时，不换行，形成水平滚动条（resize亦然）。
fit-content
width:fit-content 是比较好理解的，“shrink-to-fit”（收缩到适应内容）表现，换句话说，和CSS2.1中的 float , absolute , inline-block 的尺寸收缩表现是一样的，即在不超过父级盒子宽度的情况下，尽量撑开盒子满足自己的需求。如图：
max-content、fit-content都具有一个特点，即在自己内容不足以撑满父盒子时，宽度只为自己内容的最大宽度，不会再强行增大。
对于其取值，mdn是这么描述的
这多少有点过于学究，按需自取。
从上面描述来看，这个属性的存在价值并不大，毕竟浏览器渲染时，默认就已经是预期的收缩表现样式了。
看下面这个例子，水平居中，在内容自动填充宽度下进行水平居中。如图：
看起来，既能实现内容收敛，又可以简单实现居中，挺不错的。
总结：
内容没有超出宽度时，最终宽度为内容宽度；
内容超过父级允许的行宽时，换行（resize亦然）。
兼容性
在 caniuse 看了看兼容性，发现还不错，具体自己可以查，不贴图了。
这些个属性IE不支持，不过问题也不大，毕竟现在微软自己改用Chromium的edge了。。。
参考：
理解CSS3 max/min-content及fit-content等width值
CSS3中 4个自适应关键字: available、max-content、min-content、fit-content
CSS width中的max-content,min-content,fit-content的区别
CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content
