Увеличьте ширину div с помощью элементов абзаца, имеющих свойство css column-count

Question

У меня есть элемент абзаца. Этот пункт имеет column-count css свойство к этому. Я пытаюсь сделать мои столбцы из элемента абзаца, а также расширить ширину его родительского контейнера.

Вы можете увидеть демонстрацию проблемы здесь: https://codepen.io/Fallenstedt/pen/JJvyxe

Родительский контейнер, розовый ящик, не расширяется по ширине. Содержимое абзаца выпадает из розовой рамки.

Есть ли способ сообщить ширину элемента абзаца родительскому контейнеру, розовому блоку?

Этот предварительный просмотр лучше всего просматривать на полном экране.

    html {
      background-color: black;
      color: white;
    }
    
    .green {
      border: 2px solid green;
    }
    
    .red {
      border: 5px dashed red;
      padding: 10px;
    }
    
    .pink {
      border: 2px solid pink;
      pardding: 2px;
    }
    
    .blue {
      border: 2px solid blue;
    }
    
    .container {
      height: 250px;
      width: 90%;
    }
    
    .scrolling-container {
      height: inherit;
      width: 100%;
      overflow-x: scroll;
    /*   overflow-y: hidden; */
      display: flex;
    }
    
    .item-container {
      display: flex;
      height: 210px;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap;
      margin: auto;
    }
    
    .vertical-lr {
      writing-mode: vertical-lr;
    }
    
    .item {
      writing-mode: initial;
      height: 60px;
      width: 250px;
    }
    
    .story-container {
      height: inherit;
    }

    .story {
      height: 100px;
      font-size: 14px;
      width: 100%;
      column-count: 2;
      column-width: 200px; 
    }

<div class="container red">
      <div class="scrolling-container blue">
        <div class="item-container vertical-lr pink">
          <div class="item green"></div>
          <div class="item green"></div>
          <div class="item green"></div>
          <div class="item green"></div>
          <div class="item green"></div>
          <div class="item green"></div>
          <div class="item green"></div>
        </div>
        <div class="item-container  pink">
          <div class="story-container">
            <h1>Cool Story</h1>
            <p class="story">
              Leave it to Run the Jewels to find the connection between psychedelic drugs and systemic disorder. The new video for "Legend Has It," the first from the duo's third LP RTJ3, finds Killer Mike and El-P tripping on acid in a police lineup alongside a rotating cast of unusual suspects: a nun, an "innocent" little girl, a fireman, even a clown-faced police officer.
              Directed by Brian Beletic, the treatment intentionally "plays with the theme of guilty until proven innocent," he says. "We live in a world where the stronger the truth the greater the opposition. In this story EL-P and Killer Mike are in a police lineup and the cards are stacked heavily against them. But why is that?"
              Leave it to Run the Jewels to find the connection between psychedelic drugs and systemic disorder. The new video for "Legend Has It," the first from the duo's third LP RTJ3, finds Killer Mike and El-P tripping on acid in a police lineup alongside a rotating cast of unusual suspects: a nun, an "innocent" little girl, a fireman, even a clown-faced police officer.
            </p>
          </div>
        </div>
      </div>
    </div>