Абсолютно позиционированный div, динамически расширяющийся за пределы относительного родительского div

Question

У меня есть абсолютный позиционный div внутри относительного позиционного div.Оба они живут внутри родительского div, который я не могу изменить, который имеет явно установленный width 150px.Я хочу, чтобы мой абсолютный позиционированный 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 для .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>