【width：min-content】自适应内部元素

如果不给一个元素具体的height，它就会自动适应其内容的高度。假如我们希望width也有类似的行为，该怎么办呢？

<p>some text [···]</p>
<figure>
  ![](cat.jpg)
  <figcaption>
    background-color background-position background-size
  </figcaption>
</figure>
<p>some text [···]</p>

给figure 加了一道边框，在默认情况下，看起来就是下图这样的：

但是我们想要的效果是这个 figure 元素能跟它所包含的图片一样宽，而且是水平居中的。
那就要用到width 和height 的** min-content属性了。这个关键字将解析为这个容器内部最大的不可断行元素的宽度**（即最宽的单词、图片或具有固定宽度的盒元素）

figure {
  border:1px solid #ace;
  width: -webkit-min-content;   /*考虑到兼容性，加前缀*/
  width: -moz-min-content;
  width: min-content;
  margin:auto;
}

为了给旧版本浏览器提供一个平稳的回退样式，我们需要在使用这个技巧的同时，提供一个固定的maax-width 值：

figure {
  max-width:300px;
  max-width:min-content;
  margin:auto;
}
figure > img{
  max-width:inherit;}

对于现代浏览器来说，后一条 max-width 声明会覆盖前一条。如果figure 的尺寸是由内部因素决定时，第二条规则中的 max-width：inherit；就不会生效了。

---

参考书籍：Lea Verou《CSS揭秘》