css3 width新增属性max/min-content和fit-content、fill-availablea

在css3中width的新的属性max/min-content和fit-content、fill-availablea属性 使用时需带前缀。如：

width: -webkit-min-content;
width: -moz-min-content;
width: min-content;   

属性效果

<div class="content">
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1585722344&di=a7452f0681db97299ad58f32f6492017&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg" alt="">
        <p>这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试</p>
</div>
 <style type="text/css">
        .content{
   
            background: red;
        }
        img{
   
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
    </style>

不加属性时

min-content：div宽度以内部内容最小宽度为准

.content{
   
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}