Why are flex items overflowing container when flex-shrink set to 0?

Question

Flex container not growing to accommodate items when some items have a flex-shink:0 and container has flex-wrap:nowrap.

Case:

• container (blue) does not have an specified width (it should grow to accommodate items).
• items 1 & 3 (green) should be able to grow to certain size (10rem to 15rem) but not shrink.
• items 2 & 4 (yellow) should be able to shrink to certain size but not grow.

Note: I know there are ways to work around the problem like setting a width to the container etc... but that is not the question, I would like to know if this is normal behavior and why is it happening.

HTML:

<div class="static">
  <div class="contents">
    <div class="container">
    
      <span class="one">ITEM #1</span>

      <span class="two">ITEM #2</span>

      <span class="three">ITEM #3</span>

      <span class="four">ITEM #4</span>

    </div>
  </div>
</div>

CSS:

 * {
   box-sizing: border-box;
 }

 .static {
   display: flex;
   flex-direction: column;
   align-items: center;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow-y: scroll;
   padding: 0.5em 0;
 }

 .contents {
   display: flex;
   flex-direction: column;
   max-width: 90%;
 }

 .container {
   position: relative;
   text-align: center;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1rem;
   background-color: blue;
 }

 .container>.one,
 .container>.three {
   flex: 1 0 10rem;
   max-width: 15rem;
   background-color: green;
 }

 .container>.two,
 .container>.four {
   flex: 0 1 5rem;
   min-width: 5rem;
   background-color: yellow;
 }

RESULTS:

EXPECTED RESULT:

JSFIDDLE: https://jsfiddle.net/3b7vrjy1/3/