html - 绝对定位的 div 动态扩展到相对父 div 之外

Question

我在相对定位的 div 中有一个绝对定位的 div。这两个都位于我无法更改的父 div 中，它显式设置了 150px 的 width。我希望我的绝对定位 div 能够超出这个 150px 宽度。我还需要它是动态的——即我不想在任何地方显式设置宽度，我想要你通常通过设置 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 元素添加一个固定宽度，作为 .absolutely 的一种 max-width > 正如你描述的那样。如果 .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>