html - 绝对位置元素的宽度在超出相对父项的右边界时被截断

Question

这些 position: absolute; 放置在 position: relative; 父级内部/周围的 div 从包含的文本的大小和长度接收高度/宽度。

但是，如果其中一个超出了相关父级的右边界，它的宽度就会被截断。

如何仅使用 css 使超出相对父项右侧的 div 表现得像其他不这样做的 div？(应该适用于所有主流浏览器，包括 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 无法预测，因为它应该由文本的长度决定......唯一的异常(exception)是 max-宽度(在这个例子中，它是 200px)。

Answer 1

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

'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'.

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

为绝对div设置一个宽度

一个简单的解决方案是设置它的宽度，这样它就不会缩小。

#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>

设置宽度为fit-content/max-content

另一种方法是使用 fit-content 或 max-content ^{( limited browser compatibility )} 作为绝对 div，而不是设置它的权限。如果您的 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>