Expand a div's width with paragraph elements that have a css column-count property

Question

I have a paragraph element. This paragraph has a column-count css property to it. I am attempting to make my columns from my paragraph element and also expand the width of its parent container.

You can see a demo of the problem here: https://codepen.io/Fallenstedt/pen/JJvyxe

The parent container, the pink box, does not expand in width. The paragraph content is falling out of the pink box.

Is there a way to communicate the width of the paragraph element to the parent container, the pink box?

This preview is best viewed on full screen.

    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>