Css 当元素处于绝对位置时，如何根据其内容自动调整容器的大小？

根据容器的内容自动调整容器div大小的官方方法是什么

我希望“BorderContainer1056”的大小与其内容相符：

#BorderContainer1056{
位置：绝对位置；
顶部：39px；
左：100px；
宽度：240px；
显示：内联块；
背景色：rgba（2252252251）；
边框样式：实心；
边框宽度：1px；
边框颜色：#696969；
边界半径：0px；
溢出：自动；
}
#VGroup1061{
位置：绝对位置；
顶部：20px；
左：20px；
溢出：可见；
文本对齐：左对齐；
}
*,
*：之前，
*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
html，
身体{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}

容器中的垂直组
苹果
橙色
香蕉
葡萄
樱桃
芒果
几维鸟
菠萝
草莓

更新 总结如下：

• #VGroup1061

  ：

• #BorderContainer1056

没有明确的宽度

还没有第二个点的链接，但是如果您有一个120px的子级，并且希望父级以内容大小缩小，那么宽度不能设置为240px，这是有道理的。备选方案有：最大宽度、自动✲, 等等

通过删除

位置：绝对

或将其更改为

位置：静态

或甚至

位置：相对

来更改您的

#VGroup1061

。将子元素放置在折叠高度为0的已定位父元素中，如果您希望将父元素收缩包装到子元素上，这将没有用处，但实际上是有害的

这是W3对这一主题的官方看法

将

position:absolute

添加回代码段后（因为演示我想要演示的内容很烦人，也没有什么区别），并使子元素

position:static

或

relative

和移除

#BorderContainer1056

的固定宽度（原始“受控”主体）使其行为符合OP最初的要求

我相信以下规则集的位置✎ 也应该放在样式表的顶部：

html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

在样式表或块的底部放置强大的重置将撤消由于继承而在其前面的所有内容（即边距、填充等）

我刚刚想起，

display:table cell

也可以做您想做的事情，请参阅更新的代码段，特别是

#BorderContainer3056

display:table cell

仅在

#BorderContainer3056

没有明确宽度时才起作用。如果将其包装在另一个容器中，则可能起作用：

display:table;
table-layout: fixed;

在下面的代码片段中，有25组完全相同的a

、a

和10

s

两个

都有粉色背景和绿色边框

两个

的内容：

• 包含一个
  ，其中包含
• …10
  s

的内容有紫色背景和黄色边框

请注意，第二组

的绿色边框完美地包裹了它的内容

• fit content

  可在下找到

• 有了适当的供应商前缀（参见上一个示例），Firefox和Chrome都可以使用它，但IE和Edge是不可能的（当然这并不奇怪）

• min content

  在与

  fit content

• 正如LGSon指出的，在过去的10年里，这是一个实验性的方法，但我相信他会找到一个更合适、更正式的解决方案

✎ 上面的规则集是我的版本，与原始规则集不同，但仍然适用

✲ <代码>自动归因于@LGSon的评论参见代码片段中的

###BorderContainer5056

一小条

html，
身体{
宽度：100%；
身高：100%；
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
保证金：0；
填充：0；
}
部分{
位置：绝对位置；
背景色：rgba（225,0,0,4）；
边框样式：实心；
边框宽度：3倍；
边框颜色：绿色；
文本对齐：右对齐；
宽度：240px；
}
div{
位置：相对位置；
溢出：可见；
文本对齐：左对齐；
颜色：#红色；
}
跨度{
背景：rgba（0,025,4）；
边框：1件纯金；
显示：块；
宽度：150px；
}
#边境集装箱2056{
宽度：-moz-fit内容；
宽度：-webkit适合内容；
宽度：适合的内容；
}
/*为了演示而分开*/
#边境集装箱2056{
顶部：250px；
}
#边境集装箱3056{
显示：表格单元格；
}
/*为了演示而分开*/
#边境集装箱3056{
顶部：500px；
}
#边界容器4056{
位置：相对位置；
宽度：-moz最小含量；
宽度：-webkit最小内容；
宽度：最小含量；
}
/*为了演示而分开*/
#边界容器4056{
顶部：750px；
}
#边界容器5056{
宽度：自动；
}
/*为了演示而分开*/
#边界容器5056{
顶部：1000px；
}

BG1056
容器中的垂直组
苹果
橙色
香蕉
葡萄
樱桃
芒果
几维鸟
菠萝
草莓
BG2056
容器中的垂直组
苹果
橙色
香蕉
葡萄
樱桃
芒果
几维鸟
菠萝
草莓
BG3056
容器中的垂直组
苹果
橙色
香蕉
葡萄
樱桃
芒果
几维鸟
菠萝
草莓
BG4056
容器中的垂直组
苹果
橙色
香蕉
葡萄
樱桃
芒果
几维鸟
菠萝
草莓
BG5056
容器中的垂直组
苹果
橙色
香蕉
葡萄
樱桃
芒果
几维鸟
菠萝
草莓
#BorderContainer2056 {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

#BorderContainer4056 {
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
}