html - CSS保持div的纵横比与填充，但它被父Flexbox禁用

Question

我的目标是同时拥有：

• 两个（或更多）框响应调整，保持纵横比（使用 padding-top: x %）
• 将这些盒子包含在一个 flexbox 中，这样它们就可以具有 flex flow、wrap 和 justify（以及任何 flexbox 的东西）

什么有效：

• 当父级不是 flexbox 时（因此，显示：块）。
• 使用填充方法保持纵横比（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/

难题：

我希望“.prevdisplay”是这样的：

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

这是 jsfiddle：https ://jsfiddle.net/gmw4kn7t/4/

更新：

我向孩子添加了 flex-grow:1 ，这很有效......但是，如果所有内容的父级也是 display: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 的工作，比如包装和对齐/对齐等。我似乎找不到与图像无关的解决方案。尽管如此，我还是觉得我错过了一些非常简单的事情……我疯了吗？

标签： htmlcssflexboxdisplayaspect-ratio