CSS Keeping aspect ratio of div with padding, but it's disabled by Flexbox on parent

Question

My Objective is to have both:

• Two (or more) boxes adjust responsively, keeping aspect ratio (using padding-top: x %)
• Have those boxes be contained in a flexbox, so they can have flex flow, wrap, and justify (& any flexbox stuff)

What Works:

• When the parent is NOT flexbox (so, display:block).
• Using the padding method to keep aspect ratio ( https://www.w3schools.com/howto/howto_css_aspect_ratio.asp )

Here is what that looks like:

    .prevdisplay {
     display:block;
    }
    .prevspread {
      height:0;
      max-width:540px;
      padding-top:33.33%;
      position:relative;
      background:red;
      margin:0 0 10px;
    }
    .previnfopage {
      background:hsla(1, 50%, 60%, .6);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

      <section class="prevdisplay"> 
     <div class="prevspread">
      <div class="previnfopage">
              <div>title1</div>
      </div>
     </div>
     <div class="prevspread">
      <div class="previnfopage">
              <div>title2</div>
      </div>
     </div>
      </section>

Here's the jsfiddle: https://jsfiddle.net/gmw4kn7t/3/

CONUNDRUM:

I want the ".prevdisplay" to be this:

.prevdisplay {
    display:flex;
    flex-flow:row;
    flex-wrap:wrap;
    justify-content:center
}

Here's that jsfiddle: https://jsfiddle.net/gmw4kn7t/4/

UPDATE:

I added flex-grow:1 to the child, which works... But, then does not again if the parent of everything is also display:flex ?! Here is what that looks like:

.higherblock {
    display:flex;
    width:100%;
    justify-content:center;
    align-items:center;
    flex-flow:column;
    flex-wrap:wrap;
 }
.prevdisplay {
    display:flex;
  flex-flow:row;
    flex-wrap:wrap;
    justify-content:center;
}
.prevspread {
    height:0;
  max-width:540px;
    padding-top:33.33%;
    position:relative;
  background:red;
  margin:0 10px 10px;
  flex-grow:1;
}
.previnfopage {
    background:hsla(1, 50%, 60%, .6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

That's: https://jsfiddle.net/gmw4kn7t/8/

That way, I can do all the Flexbox stuff, like wrapping and justify/align, etc. I couldn't seem to find solutions to this, that isn't related to images. Still, it feels like something incredibly simple I'm missing... am I crazy?