CSS Container queries not working with flexbox space-between

I want to add a CSS container query container for my 2nd child in my flexbox where both children are spaced out using space-between but it is not working. My second child goes off-screen and when I inspect the size of the div.container it says 0px width. What am I doing wrong here?

Here is a working fiddle: https://jsfiddle.net/zn3d2e54/

Here is my code:

<div class="flex justify-between gap-5">
    <div>
        <div>First</div>
    </div>
    
    <div class="container">
        <div>Second</div>
    </div>
</div>

body {
  background: #2b2e36;
  color: white;
  font-size: 20px;
}

.container {
  container-type: inline-size;
}

@container (min-width: 100px) {
  .flex > div > div {
    color: red;
  }
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.gap-5 {
  gap: 5px;
}

.flex > div {
  background: #ffff0061;
}