Nested 'justify-content: space-around' not working

Question

I have 2 parent containers with 2 child containers in them. (Altogether there are 4 containers.) The wrapper that everything is wrapped in, and the wrapper that the 2 parent containers are in, are set to the following css style:

display: flex;
flex-wrap: wrap;
justify-content: space-around;

Problem
The wrapper that the 2 parent containers are in, doesn't seem to register the justify-content: space-around;

Trying to Accomplish
I want all containers to have justify-content: space-around;. In addition to that, I want the 2 child containers to have justify-content: space-around;. Something like this:

I still want the 'less space' to adjust as the page size adjusts. So I therefore can't just add a margin to it.

JSFiddle

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.outerWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.heading {
  font-size: 20px;
}

<div id="container">
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: orange;">
      <li class="heading">FIRST</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: lightblue;">
      <li class="heading">Second</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: pink;">
      <li class="heading">Third</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: burlywood;">
      <li class="heading">Fourth</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
</div>

Answer 1

The flex items in the main container use content width by default. This means the children of the items (First, Second, etc.) are packed together and justify-content:space-around has no space to work.

main container (#container): red border // flex items (.outerWrapper): black border

Add flex: 1 to .outerWrapper:

Now both items occupy the full available width of #container, and justify-content: space-around has space to work.

#container {
  display: flex;
  flex-wrap: wrap;
  border: 2px dashed red;
  justify-content: space-around;
}
.outerWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 2px dashed black;
  flex: 1;
}
.heading {
  font-size: 20px;
}

<div id="container">
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: orange;">
      <li class="heading">FIRST</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: lightblue;">
      <li class="heading">Second</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: pink;">
      <li class="heading">Third</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: burlywood;">
      <li class="heading">Fourth</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
</div>

revised fiddle

To create additional space between the first two and last two items (like the image in the question), one method introduces a third flex item between them.

You can then control the width of each item with the flex property.

.outerWrapper:nth-child(1) { flex: 2; }
.outerWrapper:nth-child(2) { flex: 1; }
.outerWrapper:nth-child(3) { flex: 2; }

You'll need to remove this spacer item when the boxes begin to wrap on smaller screens. Here's one way to do that:

@media ( max-width: 450px ) {
  .outerWrapper:nth-child(2) { display: none; }  
}

revised fiddle