flexbox项目-通过拉伸对齐忽略边距底部

Question

在一组具有“拉伸”对齐方式的flexbox项目中，当一个项目的边距为底部时，其他项目将扩展为包括该边距。有没有一种方法可以创建弹性布局，即使将边距底部应用于元素之一，项目也可以保持相同的高度？

演示：

.flex {
  display: flex;
  width: 100%;
}
  
.flex div {
    padding: 50px;
    background-color: red;
    margin: 10px;
    flex-grow: 1;
}

.flex div:first-child {
    margin-bottom: 50px;
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>