Css 有没有办法让一行中的两个flexbox项堆叠为一列？

我试图构建一个布局，其中有一个父flexbox div，其中包含各个部分，遇到的问题是，当整个布局作为一行时，试图将两个部分元素堆叠在一列中

目前，有两个部分占据了行的全部高度，然后我有两个额外的部分，理想情况下，它们应该是较短内容的高度，并在单个列中相互堆叠：

我尝试堆叠的两个部分在我尝试修复此问题时都有以下CSS参数：

flex-basis: 40%;
align-self: flex-start;

父div flex有：

display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;

---

任何关于如何实现这一目标的想法都将不胜感激，谢谢

您将使用比一级flexbox更复杂的布局。我想到了几个选择：

您可以给该行的第三个单元格显示：flex；弹性方向：列，然后将较小的div嵌套在其中

或者，您可以使用网格代替flex。然后可以将其排列为三列，但可以根据需要将某些单元格设置为跨多个列或行。例如：

.wrapper {
  display: grid;
  grid-template-columns: max-content 1fr 1fr;
}

.stars {
  grid-column: span 3;
}

.left, .middle {
  grid-row: span 2;
}

---

您是否尝试过将“flex direction”设置为列？请将您的html添加到网格中，最好是在网格中！谢谢你的洞察力