Question

编写CSS大约15年后，我仍然发现了我不理解的东西......

下面是一个简单的页面，其中h1元素的宽度为2000像素。正如预期的那样，这会导致页面具有水平滚动条。

但问题是，父div.wrapper没有扩展到其内容的宽度 - 它的黄色背景只延伸到视口的宽度。（运行以下代码段并水平滚动以查看问题。）

body { margin: 0; }

.wrapper { background: yellow; }

h1 {
  width: 2000px;
  border: 2px solid red;
}

<!doctype html>
<html>
  <body>
    <div class="wrapper">
      <h1>Hello</h1>

      <p>More content</p>
    </div>
    
    <p>More content outside wrapper</p>
  </body>
</html>

这是奇怪的事情：尝试将body { position: absolute }添加到上面的CSS并修复它。 div.wrapper现在扩展到其内容的宽度 - 黄色一直延伸到文档的右侧。

问题：

为什么设置body { position: absolute }来解决问题？
有没有更好（更直观）的方法来解决问题？

约束：我并不总是知道内容的宽度，我只是希望包装器总是延伸，所以它的背景颜色一直到内容的右边。

Answer 1

你还没告诉div如何处理由内部元素的宽度引起的溢出。添加overflow: auto。

＆＃13;

body { margin: 0; }

.wrapper { background: yellow; overflow: auto; }

h1 {
  width: 2000px;
  border: 2px solid red;
}

＆＃13;

<!doctype html>
<html>
  <body>
    <div class="wrapper">
      <h1>Hello</h1>

      <p>More content</p>
    </div>
    
    <p>More content outside wrapper</p>
  </body>
</html>

＆＃13;

我不相信将position: absolute添加到正文修复这一点的明显原因。它确实从文档流中取出了body，但body是所有内容的容器。所以我会把它形容为怪癖。

我们可以将body描述为内容宽度的初始约束，.wrapper。绝对消除了这种约束。实际上，它可能会删除页面上任何其他元素的宽度约束，因此它们可能都会扩展为包含任何内部内容。

Answer 2

让我们从这开始：

但问题是，父 div.wrapper 不展开到宽度其内容 - 其黄色背景仅延伸至视口的宽度。

默认情况下，div是一个块元素，一个块元素占用它的父容器的整个宽度，所以在这种情况下你的包装器的宽度就是屏幕的宽度。除此之外，由于子内容宽度大于父宽度，因此我们面临溢出，默认情况下：

内容未被剪裁，可能会在填充框^ref
之外呈现

这解释了为什么背景不包括h1，因为这个在外面。

要改变这种行为，我们有两个解决方案：

我们通过指定与visible（默认值）不同的值来更改overflow的行为。通过执行此操作，您还会注意到保证金的一些更改，因为您还面临保证金折叠（h1和p的保证金与{{1}的保证金相冲突}）。

div.wrapper

body { margin: 0; } .wrapper { background: yellow; margin:10px 0; } h1 { width: 2000px; border: 2px solid red; }

我们将元素的显示属性更改为除块之外的其他内容。例如，我们可以使用<div class="wrapper" style="overflow: auto;"> <h1>Hello</h1> <p>More content</p> </div> <div class="wrapper" style="overflow: hidden;"> <h1>Hello</h1> <p>More content</p> </div> <div class="wrapper" style="overflow: scroll;"> <h1>Hello</h1> <p>More content</p> </div> <p>More content outside wrapper</p>或inline-block，在这种情况下，包装器将适合其元素的内容，并且溢出正文

inline-flex

body { margin: 0; } .wrapper { background: yellow; display: inline-block; } h1 { width: 2000px; border: 2px solid red; }

关于这个：


为什么设置正文{position：absolute}会解决问题？

我们都知道<div class="wrapper"> <h1>Hello</h1> <p>More content</p> </div> <p>More content outside wrapper</p>意味着什么，但有趣的是这一部分：


大多数时候，绝对定位的元素有高度和   宽度设置为自动的大小为以适合其内容。然而，   可以制作未更换的，绝对定位的元素来填充   通过指定顶部和底部以及离开可用的垂直空间   高度未指定（即自动）。它们同样可以填充   通过指定左右两个可用的水平空间   将宽度保留为自动。 ^ref

Answer 3

是的，您可以使用width: fit-content;

MDN将其描述为;

<强>嵌合内容
  较大的：


内在最小宽度

内在首选宽度和可用宽度中的较小者

按预期工作;包含元素扩展。但是，像往常一样，IE落后并且不支持它......

编辑要清楚;此规范仍处于Working Draft状态，因此不应在生产环境中使用（除非您不关心Internet Explorer）。

使元素扩展到其内容的宽度（当内容比视口宽时）

3 个答案: