难题
众所周知，如果不给元素一个具体的height,它就会自动适应内容的高度。假如我们希望width也具有同样的类似行为，该怎么做呢？如下：
<p>Cat</p>
<figure>
<img src="http://upload-images.jianshu.io/upload_images/1673685-29a5a721f5b3d5ad.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" >
<figcaption> 深闺驯绕闲时节，卧花茵，香团白雪，爪位湘裙，回身欲捕，绣成双蝶</figcaption>
</figure>
<p>Cat</p>
假如给它添加一个边框，效果效果如下图：
那么我们怎么能够使这个
figure元素能和它所包含的图片一样宽，而且还是水平居中的呢？目前可以想到的实现方式：
- 让
<figure>元素浮动会使它得到正确的宽度，但同时改变了它的布局模式，这往往会导致我们不想要的结果，如下图：
- 对
figure应用display: inline-block,宽度计算与预期一致（如下图），但是无法完成水平居中的任务，我们还要对其父元素进行text-align: center,然后对父元素的所有子元素都设置一边text-align: left.
- 最后，我们可能会对
figure应用固定的width和max-width，然后figure > img应用max-width：100%，可是这种方法无法充分的利用有效空间，对于过小的图片来说，布局效果很差，更不要说响应式了。
解决方案
min-content:这个关键字将解析为这个容器内部最大的不可短行元素高度（即最宽的单词、图片或具有固定宽度的盒元素）
现在我们可以用两行CSS代码就可以把figure设置为恰当的宽度，并让它水平居中
figure {
max-width: min-content;
margin: auto;
}
效果如下图
下面为完整的代码，提供了旧版浏览器平稳回退的样式
figure {
max-width: 300px;
max-width: min-content;
margin: auto;
}
figure > img {
max-width: inherit;
}
figure {
padding: 10px;
border: 1px solid silver;
}
对于现代浏览器来说，后一条max-width声明会覆盖前一条。如果figure的尺寸是由内部因素决定时，第二条规则中的max-width:inherit就不会生效了
除了min-content，还有max-content，fit-content
max-content: 它的行为类似于我们之前看到的display: inline-block;说白了就是假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是max-content所表示的尺寸。如下图
fit-content:width: 和CSS2.1中的float,absolute,inline-block的尺寸收缩表现是一样的。
我们不禁会想，既然fit-content和float有一样的表现，为什么还会定义新的关键字呢？
以水平居中效果举例，首先浮动float不能实现，因为它只可以左浮动和右浮动；绝对定位不占据空间，无法在普通文档流中应用，而inline-block需要父级使用text-align:center，而本身可能还需要text-align:left才可以实现水平居中该效果，依旧很繁琐。
而width:fit-content可以没有这些烦恼，因为，width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto
实现元素向内自适应同时的居中效果了，如下图：
