html - 使用绝对定位时无法使 max-width 工作

Question

当使用绝对定位时，我无法让 max-width 工作。在 https://jsfiddle.net/jn2bs6ax/该元素的宽度应尽可能小，最大宽度为 1000 像素。但它占据了大约 50% 的宽度并包裹了文本。如何让它发挥作用？如果我将 max-width 设置为 300px 之类的小值，它会起作用，但任何大于当前宽度的值都不会导致它展开。

这个例子只是展示了一个绝对定位到中心下方的元素，但是我使用了transform, top, bottom、left 和 right 以相对于元素在所有 4 个方向上定位事物。该解决方案应该适用于所有 4 种情况。

有个类似的问题CSS (position:absolute + left:50% = max-width:50%)?但答案仅适用于在下方居中，但不适用于所有情况，例如定位到垂直居中的元素的右侧。

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

CSS

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 100%;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

Answer 1

尝试设置 display: inline-table; 或 display: table;

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-table;
}

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>