当超出相对父右边界时,绝对位置元素的宽度会截断

Question

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

但是,如果其中一个延伸到相对父级的右边界之外,则其宽度似乎会截断.

如何仅使用css使得超出相对父级右侧的div表现为不使用其他父级的div？(应该适用于所有主流浏览器,包括Edge而不是IE)

这是一个小提琴,但我也将复制下面的代码+截图:

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(或者如果offsetParentDOM分支中不存在先前的主体).

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

该解决方案需要适用于所有主流浏览器,包括Edge,而不是IE.而且重申一下width,绝对div的'无法预测,因为它应该由文本的长度来决定......唯一的例外是会有一个max-width(在这个例子中,它是200px).

Answer 1

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

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

这应该在这种情况下有效。非常9999999px高，因此只要内容一样长，框就会向右延伸。如果你想要一个限制，给它一个合理的长度就可以了。

Answer 2

的#absolute-problemdiv有一个左侧设置为特定值,auto宽度和auto右.根据规范§10.3.7中的这条规则,这会缩小div的宽度以适应其内容.

'width'和'right'是'auto'而'left'不是'auto',然后宽度缩小到适合.然后解决'正确'.

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

设置width为绝对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>

设置right为绝对div

它的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 ^{(有限的浏览器兼容性)}绝对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>