CSS通过填充保持div的长宽比，但是被父级的Flexbox禁用

Question

我的目标是同时具备以下两个条件：

• 两个（或更多）框进行自适应调整，并保持宽高比（使用padding-top：x％）
• 将这些盒子包含在flexbox中，以便它们具有flex流，包装和对齐（以及任何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的工作，例如包装和对齐/对齐等。我似乎找不到与图像无关的解决方案。不过，感觉就像我遗漏的东西简直难以置信……我疯了吗？