自适应内部元素
众所周知，如果不给元素指定一个具体的height，它就会自动适应其内容的高度。假如我们希望width也有类似的行为，看下面这段代码：
div I am a text! I am a text! ....
figure
img(src="/static/pictures/08685344-11d9-426d-a204-ccabbf7049ba-2060x1236.jpeg")
figcaption I am a text! I am a text! ...
div I am a text! I am a text! ...
我们希望：这个figure元素能跟它包含的图片一样宽（图片长度不固定），而且是水平居中的。
那么如何让figure的宽度由内部因素（图片），而不是由外部因素（它的父元素）来决定呢？我们可能会想到：
让figure元素浮动：
会得到几乎是我们想要的宽度，但会影响布局模式。
或者，对figure元素应用display：inline-block：
发现宽度还是有偏差，并且这样并没有居中。
再或者，对figure元素应用一个固定的width或max-width值，然后对figure > img应用max-width：100%。这种方法是可以某些情况下实现想要的宽度，但当图片特别小时，布局会很突兀，更别说响应式了。
真正牛逼的解决方法来了：CSS内部与外部尺寸模型（第三版）为width和height属性定义了一些新的关键字，其中最有用的就是min-content了。这个关键字将解析为这个容器内部最大的不可断行元素的宽度。
看下面的代码和效果：
figure {
border: 1px solid black;
padding: 10px;
width: min-content;
margin: auto;
}
完美实现！
除了min-content，其他的值还有max-content，它的行为类似于display：inline-block。而fit-content的行为与浮动元素是相同的。
现在的浏览器支持情况：
