使用min-content使容器的宽度适应内部元素上下文，并创建适合HTML内容的设计是本机响应的（视口内的HTML内容流）。随着CSS的广泛应用，设计者创造了很多布局固定的“盒子”，将内容强行塞进盒子里，这与HTML原生响应的特点相悖。在过去的几年里发生了一场革命，包括响应式设计、响应式设计、移动优先设计等等。所有这些想法的一个基本部分是确定内容的优先级。因此CSS3定义并实现了一些新的属性。这些包括内部和外部宽度值。引入问题我们用一个常见的WEB页面设计问题（图形元素里面的图片）来引入问题并进行解释。www.30ke.cn三十客-一个专注于前端学习和分享的网站。
因为figure是一个块级标签，元素延伸到整个容器。在内容优先设计中，我们通常希望容器（在本例中为图形元素）尽可能小。到目前为止，有几种方法可以做到这一点。figure{float:left;}通过设置float，可以折叠figure元素。但是，如果图中的p（段落）元素比图像宽度宽，则图元素会收缩到最宽的子元素，而不是图像的宽度。使用display:inline-block或table-cell也存在上述问题。figure{width:500px;}将figure元素硬编码为宽度，但这会使元素固定且无响应。使用min-width帮助我们最终找到最适合内部图像的最佳图像容器宽度。里面的文本是否换行并不重要。我们可以用min-content来做到这一点。虽然这个值从2006年开始就有了，但它仍然是实验性的，所以需要在不同的浏览器上加上前缀。图{边框：2px纯黑色；背景：#cae9b8；保证金：0；宽度：-moz-min-content；宽度：-webkit-min-content；width:min-content;}上面的代码，很好的解决了上面的问题。并且margin和padding在图像容器内仍然有效。min-content是内在和外在的宽高系列值之一，其他还有max-content、fit-content等。这些值与flexbox、grid等布局系统一起，让网页设计变得更好、更灵活。min-content得到很好的支持，所有现代主流浏览器都支持这个值，但InternetExplorer和OperaMini不支持。所以我们在max-width的帮助下实现了后备解决方案。图{最大宽度：500px；max-width:min-content;}完整的fallback显示方案如下演示程序所示：在线演示程序和OperaMinifallback。但由于本人水平有限，文中难免存在描述不清、代码不完善等问题。请多多批评指正！参考CSSIntrinsic&ExtrinsicSizingModuleLevel3DesignFromtheInsideOutWithCSSMin-Contentplay.csssecrets.io/
