解决方案是将您的 div 设置为 display: inline-block。
你想要一个块元素，它具有 CSS 所称的收缩以适应宽度，而规范没有提供获得这种东西的幸运方式。在 CSS2 中，缩小以适应不是目标，而是意味着处理浏览器“必须”凭空获得宽度的情况。这些情况是：
漂浮
绝对定位元素
内联块元素
表格元素
当没有指定宽度时。我听说他们想在 CSS3 中添加你想要的东西。现在，请使用上述方法之一。
不直接公开该功能的决定可能看起来很奇怪，但这是有充分理由的。它是昂贵的。 Shrink-to-fit 意味着至少要格式化两次：在知道元素宽度之前不能开始格式化元素，并且不能计算不经过整个内容的宽度。另外，人们不需要像人们想象的那样经常收缩以适应元素。为什么你的桌子周围需要额外的 div？也许表格标题就是您所需要的。
inline-block 正是为此而设计的，并且完美地解决了这个问题。
我认为使用
display: inline-block;
可以，但是我不确定浏览器的兼容性。
另一种解决方案是将您的 div 包装在另一个 div 中（如果您想保持阻止行为）：
HTML：
<div>
<div class="yourdiv">
content
</div>
</div>
CSS：
.yourdiv
{
display: inline;
}
display: inline-block 为您的元素添加额外的边距。
我会推荐这个：
#element {
display: table; /* IE8+ and all other modern browsers */
}
奖励：您现在还可以通过添加 margin: 0 auto 轻松地将新奇的 #element 居中。
您可以尝试 fit-content (CSS3)：
div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
浏览器支持
规格
margin: auto 是我一起去的。
有两个更好的解决方案
显示：内联块；或显示：表格；
这两个display:table;更好，因为display: inline-block;增加了额外的边距。
对于 display:inline-block;，您可以使用负边距方法来修复额外的空间
对我有用的是：
display: table;
在 div 中。 （在 Firefox 和 Google Chrome 上测试）。
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
Foo Hack – Cross Browser Support for inline-block Styling (2007-11-19)。
不知道这会出现在什么上下文中，但我相信 CSS 样式的属性 float left 或 right 会产生这种效果。另一方面，它也会有其他副作用，例如允许文本在其周围浮动。
如果我错了，请纠正我，我不是 100% 确定，目前无法自己测试。
你的问题的答案在未来我的朋友......
即“内在”是最新的 CSS3 更新
width: intrinsic;
不幸的是 IE 落后了所以它还不支持它
有关它的更多信息：CSS Intrinsic & Extrinsic Sizing Module Level 3 和 Can I Use?: Intrinsic & Extrinsic Sizing。
现在您必须满足于将 <span> 或 <div> 设置为
display: inline-block;
width:1px;
white-space: nowrap;
对我来说很好:)
与 CSS2 兼容的解决方案是使用：
.my-div
{
min-width: 100px;
}
您还可以浮动您的 div，这将迫使它尽可能小，但如果您的 div 内的任何内容是浮动的，您需要使用 clearfix：
.my-div
{
float: left;
}
好的， 在许多情况下，您甚至不需要执行任何操作，因为默认情况下 div 将 height 和 width 设为自动，但如果不是您的情况，应用 inline-block 显示会起作用为您...查看我为您创建的代码，它可以满足您的需求：
div {显示：内联块； }
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet。 Maecenas et magna egestas，facilisis purus quis，前庭 nibh。 | Nunc auctor aliquam est ac viverra。 sed enim nisi、feugiat sed accumsan eu、convallis eget felis。 Pellentesque consequat eu leo nec pharetra。 Aenean interdum enim dapibus diam. | Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Morbi ultrices feugiat massa sed laoreet。 Maecenas et magna egestas，facilisis purus quis，前庭 nibh。 |
这已在评论中提到，并且很难在其中一个答案中找到，因此：
如果您出于某种原因使用 display: flex，则可以改用：
div {
display: inline-flex;
}
This is also widely supported across browsers.
你可以试试这段代码。按照 CSS 部分中的代码进行操作。
div {显示：内联块；填充：2vw；背景颜色：绿色； }表{宽度：70vw；背景颜色：白色； }
| 苹果 | 香蕉 | 草莓 |
| 苹果 | 香蕉 | 草莓 |
| 苹果 | 香蕉 | 草莓 |
只需将宽度和高度设置为适合内容。这很简单。
div {
width: fit-content;
height: fit-content;
padding: 10px;
}
我正在添加填充：10px;。如果省略，div 元素将完全贴在表格上，看起来有点笨拙。填充将在元素的边框和它的内容之间创建给定的空间。但这是你的愿望，不是强制性的。
adding: 10px; 部分，这与 2013 年 5 月 27 日 0:41 发布的答案相同
只需将样式放入您的 CSS 文件
div {
width: fit-content;
}
尝试使用 width: max-content 属性根据内容大小调整 div 的宽度。
试试这个例子，
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
width: max-content;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>
</body>
</html>
您只需使用 display: inline;（或 white-space: nowrap;）即可完成。
希望这个对你有帮助。
您可以将 inline-block 用作 @user473598，但请注意旧版浏览器。
/* Your're working with */
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;
Mozilla 根本不支持 inline-block，但他们有 -moz-inline-stack 大致相同
围绕 inline-block 显示属性的一些跨浏览器：https://css-tricks.com/snippets/css/cross-browser-inline-block/
您可以在以下位置看到一些具有此属性的测试：https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div id="content_lalala">
this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
</div>
</td>
</tr>
</table>
我知道人们有时不喜欢表格，但我得告诉你，我尝试了 css 内联技巧，他们在某些 div 中有点工作，但在其他人没有，所以，将扩展的 div 包含在里面真的更容易一个表格......并且......它可以有或没有内联属性，但表格仍然是要保存内容总宽度的表格。 =)
一个工作演示在这里-
.floating-box { 显示：-moz-inline-stack;显示：内联块；宽度：适合内容；高度：适合内容；宽度：150px；高度：75px；边距：10px；边框：3px 实心#73AD21； }
The Way is using inline-block
CSS 中也添加了支持元素。
我的 CSS3 flexbox 解决方案有两种风格：顶部的一个表现得像一个跨度，底部的一个表现得像一个 div，在包装器的帮助下占据所有宽度。它们的类分别是“top”、“bottom”和“bottomwrapper”。
正文 { 字体系列：无衬线； } .top { 显示：-webkit-inline-flex;显示：inline-flex； } .top, .bottom { 背景颜色：#3F3;边框：2px 实心#FA6； } /* bottomwrapper 将占用其余的宽度 */ .bottomwrapper { display: -webkit-flex;显示：弯曲； } 表 { 边框折叠：折叠； } table, th, td { 宽度: 280px;边框：1px 实心 #666; } th { 背景颜色：#282;颜色：#FFF； } td { 颜色：#444; } th, td { 填充：0 4px 0 4px;这是
| OS | Version |
|---|---|
| OpenBSD | 5.7 |
| Windows | 请升级到10！ |
或者可能是...
| OS | Version |
|---|---|
| OpenBSD | 5.7 |
| Windows | 请升级到10！ |
display: inline-flex; 点赞。顺便说一句，这适用于 Chrome 62、firefox 57 和 safari 11 没有前缀
篡改 Firebug 我发现属性值 -moz-fit-content 完全符合 OP 的要求，可以按如下方式使用：
width: -moz-fit-content;
虽然它只适用于 Firefox，但我找不到其他浏览器（如 Chrome）的等效项。
fit-content。 Firefox 仅支持宽度。其他浏览器很好地支持它。
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
这将使父 div 宽度与最大元素宽度相同。
试试 display: inline-block;。要使其跨浏览器兼容，请使用以下 css 代码。
div {显示：内联块；显示：-moz-inline-stack；缩放：1； *显示：内联；边框样式：实心；边框颜色：#0000ff； }
| Column1 | Column2 | Column3 |
.outer{
width:fit-content;
display: flex;
align-items: center;
}
.outer .content{
width: 100%;
}
<div class=outer>
<div class=content>
Add your content here
</div>
</div>
div {宽度：适合内容； }
width: -moz-fit-content; 才能在 Firefox 上工作。
我通过在 div 标记内添加 span 标记并从外部 div 标记移动 CSS 格式解决了类似的问题（我不想使用 display: inline-block，因为该项目居中）到新的内部 span 标记。如果 display: inline block 不适合您，请将其作为另一种选择。
我们可以在 div 元素上使用以下两种方式中的任何一种：
display: table;
或者，
display: inline-block;
我更喜欢使用 display: table;，因为它自己处理所有多余的空格。而 display: inline-block 需要一些额外的空间修复。
关注公众号
不定期副业成功案例分享
span或div或ul或其他任何东西，重要的部分是您希望最小宽度的容器具有 CSS 属性display: inline-blockdisplay: inline-block属性，margin: 0 auto;将无法按预期工作。在这种情况下，如果父容器具有text-align: center;，则inline-block元素将水平居中。margin: 0 auto;中的auto更改为0（或您可以选择的任何值）。