绝对定位的 div 动态扩展超出相对父 div

Question

我在相对定位的 div 中有一个绝对定位的 div。这两个都存在于我无法更改的父 div 中，它有一个明确设置为 150px 的width。我希望我的绝对定位 div 能够扩展到超过 150 像素的宽度。我还需要它是动态的 - 即我不想在任何地方显式设置宽度，我希望通过设置 max-width 并让绝对定位的 div 的内容填充可用空间来获得通常的行为.这可能吗？

.outerContainer {
  width:150px;/*can't be changed*/
}

.innerContainer {
  position: relative;
}

.absolutely {
  position: absolute;
}

.item {
  display:inline-block;
}

<div class="outerContainer">
    <div class="innerContainer">
        <div class="absolutely"> <!-- want this to extend beyond outerContainer width so items wrap less-->
          <div class="item">
              first item
          </div>
          <div class="item">
              second item
          </div>
          <div class="item">
              third item
          </div>
          <div class="item">
              fourth item
          </div>
        </div>
    </div>
</div>

jsfiddle 版本： https://jsfiddle.net/3xbpzp7b/

Answer 1

您可以做的是为.innerContainer 元素添加一个固定宽度，该元素的作用类似于max-width for .absolutely，正如您所描述的那样。如果.absolutely 里面的内容多，它会换行，如果少，它会变窄。

.outerContainer {
  width:150px;/*can't be changed*/
}

.innerContainer {
  position: relative;
  width: 250px;
}

.absolutely {
  position: absolute;
  background: #fb9;
}

.item {
  display:inline-block;
}

<div class="outerContainer">
    <div class="innerContainer">
        <div class="absolutely"> <!-- want this to extend beyond outerContainer width so items wrap less-->
          <div class="item">
              first item
          </div>
          <div class="item">
              second item
          </div>
          <div class="item">
              third item
          </div>
          <div class="item">
              fourth item
          </div>
        </div>
    </div>
</div>