CSS Сохранение пропорций div с отступом, но это отключено Flexbox на родительском

Question

Моя цель - иметь оба:

• Два (или более) поля корректируются, сохраняя соотношение сторон (используя padding-top: x%)
• Поместите эти коробки во flexbox, чтобы они могли иметь гибкий поток, обтекание и выравнивание (& любой материал flexbox)

Что работает:

• Когда родитель НЕ является flexbox (поэтому, display: block).
• Использование метода отступов для сохранения соотношения сторон (https://www.w3schools.com/howto/howto_css_aspect_ratio.asp)

Вот как это выглядит:

    .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>

Вот jsfiddle: https://jsfiddle.net/gmw4kn7t/3/

CONUNDRUM :

Я хочу, чтобы ".prevdisplay" было таким:

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

Вот этот jsfiddle: https://jsfiddle.net/gmw4kn7t/4/

ОБНОВЛЕНИЕ:

Я добавил flex-grow: 1 для дочернего элемента, который работает ... Но, тогда не будет, если родительский элемент всего также будет отображаться: flex?! Вот как это выглядит:

.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%;
}

То есть: https://jsfiddle.net/gmw4kn7t/8/

Таким образом, я могу делать все вещи Flexbox, такие как обтекание и выравнивание / выравнивание и т. Д. Мне кажется, я не мог найти решения для этого, не связанного с изображениями. Тем не менее, мне кажется, что что-то невероятно простое мне не хватает ... я сумасшедший?