当超出相对父级的右边框时，绝对位置元素的宽度会被截断

Question

这些位于position: relative; 父级内部/周围的position: absolute; div 接收来自所包含文本的大小和长度的高度/宽度。

但是，如果其中一个超出了相对父级的右边界，则其宽度似乎会被截断。

我怎样才能使超出相对父级右侧的 div 表现得像其他没有的 div，只使用 css？（应该适用于所有主要浏览器，包括 Edge 但不即）

Here is a fiddle，不过我也会复制下面的代码+截图：

HTML：

<div id="relative">
    <div id="absolute-working-left">
        My width and height are determined by my text content.
    </div>
    <div id="absolute-working-middle">
        Mine, too.
    </div>
    <div id="absolute-problem">
        But not me... I am a problem, because my width is truncated when I extend beyond the right side of my 'relative' parent.  WHY???
    </div>
</div>

...以及样式。请注意，我希望绝对 div 宽度在换行之前达到最大 200px。否则，宽度应由包含文本的长度决定：

#relative {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 300px;
  background-color: white;
}

#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
  position: absolute;
  top: 45px;
  font-size: 12px;
  max-width: 200px;
}

#absolute-working-left {
  background-color: lightblue;
  left: -300px;
}
#absolute-working-middle {
  background-color: lightgreen;
}
#absolute-problem {
  background-color: red;
  left: 80px;
}

在实现工具提示时出现此问题，当开发人员使用该工具提示时，需要将自身定位为 WRT 一个 offsetParent（或正文，如果其 DOM 分支中不存在前面的 offsetParent）。

编辑：如何仅使用 css 实现所需的行为？

该解决方案需要适用于所有主流浏览器，包括 Edge，但不适用于 IE。重申一下，绝对 div 的 width 无法预测，因为它应该由文本的长度决定......唯一的例外是会有一个 max-width（在这个例子中，它是200 像素）。

Answer 1

#absolute-problem div 的左侧设置为特定值，auto 宽度和 auto 右侧。根据this rule in §10.3.7 of the spec，这将缩小 div 的宽度以适应其内容。

'width' 和 'right' 是 'auto' 并且 'left' 不是 'auto'，那么宽度就是 shrink-to-fit 。然后求解“对”。

虽然似乎没有可靠的方法来实现所需的确切行为（因为没有设置足够的属性来计算宽度），但以下是一些解决此问题的方法。

为绝对 div 设置 width

一个简单的解决方案是设置它的宽度，使其不会收缩。

#absolute-problem {
  background-color: red;
  left: 80px;
  width: 100px;
}

body {
  background: #EEE;
}
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 300px;
  background-color: white;
  font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
  position: absolute;
  top: 45px;
  font-size: 12px;
  max-width: 200px;
}
#absolute-working-left {
  background-color: lightblue;
  left: -300px;
}
#absolute-working-middle {
  background-color: lightgreen;
}
#absolute-problem {
  background-color: red;
  left: 80px;
  width: 100px;
}

<div id="relative">
  relative parent
  <div id="absolute-working-left">
    My width and height are determined by my text content.
  </div>
  <div id="absolute-working-middle">
    Mine, too.
  </div>
  <div id="absolute-problem">But not me... I am a problem, because my width is truncated when I extend beyond the right side of my 'relative' parent. WHY???</div>
</div>

为绝对 div 设置 right

如果您的 div 的宽度未知，解决此问题的一种方法是同时设置 right。这会相应地调整 div 的宽度。

#absolute-problem {
  background-color: red;
  right: -80px;
  left: 80px;
}

body {
  background: #EEE;
}
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 300px;
  background-color: white;
  font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
  position: absolute;
  top: 45px;
  font-size: 12px;
  max-width: 200px;
}
#absolute-working-left {
  background-color: lightblue;
  left: -300px;
}
#absolute-working-middle {
  background-color: lightgreen;
}
#absolute-problem {
  background-color: red;
  left: 80px;
  right: -80px;
}

<div id="relative">
  relative parent
  <div id="absolute-working-left">
    My width and height are determined by my text content.
  </div>
  <div id="absolute-working-middle">
    Mine, too.
  </div>
  <div id="absolute-problem">But not me... I am a problem, because my width is truncated when I extend beyond the right side of my 'relative' parent. WHY???</div>
</div>

将width设置为fit-content/max-content

另一种方法是使用fit-content 或max-content ^{(limited browser compatibility)} 作为绝对div，而不是设置其right。如果 div 的内容不一定扩展到最大宽度，这会有所帮助。

#absolute-problem {
  background-color: red;
  right: -80px;
  width: fit-content;
}

body {
  background: #EEE;
}
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 300px;
  background-color: white;
  font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
  position: absolute;
  top: 45px;
  font-size: 12px;
  max-width: 200px;
}
#absolute-working-left {
  background-color: lightblue;
  left: -300px;
}
#absolute-working-middle {
  background-color: lightgreen;
}
#absolute-problem {
  background-color: red;
  left: 80px;
  width: fit-content;
}

<div id="relative">
  relative parent
  <div id="absolute-working-left">
    My width and height are determined by my text content.
  </div>
  <div id="absolute-working-middle">
    Mine, too.
  </div>
  <div id="absolute-problem">But not me...</div>
</div>

设置min-width和max-width

一种现实的方法是赋予在给定范围内调整其大小的能力，以控制其溢出。

#absolute-problem {
  background-color: red;
  left: 80px;
  min-width: 50px;
  max-width: 200px;
}

body {
  background: #EEE;
}
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 300px;
  background-color: white;
  font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
  position: absolute;
  top: 45px;
  font-size: 12px;
  max-width: 200px;
}
#absolute-working-left {
  background-color: lightblue;
  left: -300px;
}
#absolute-working-middle {
  background-color: lightgreen;
}
#absolute-problem {
  background-color: red;
  left: 80px;
  min-width: 50px;
  max-width: 200px;
}

<div id="relative">
  relative parent
  <div id="absolute-working-left">
    My width and height are determined by my text content.
  </div>
  <div id="absolute-working-middle">
    Mine, too.
  </div>
  <div id="absolute-problem">But not me...</div>
</div>

Answer 2

我在我的一个项目中也遇到了这个问题，我找到了一个简单的解决方案。只需在框中添加一个否定的margin-right。

#absolute-problem {
  margin-right: -9999999px;
}

这应该适用于这种情况。 9999999px 非常高，只要内容是，框就会向右延伸。如果你想要一个限制，给它一个合理的长度就行了。