自动折叠带有孩子的flex容器

Question

我想拥有一个包含2个孩子的Flex容器，其行为如下：

• 容器占用100％宽度
• 儿童占用容器宽度的50％
• 子视图使用视口缩小，直到父级达到某个最小宽度。
• 在达到最小宽度后，子项将垂直堆叠并继续按父容器的比例收缩。

实现这个目标的css是什么？

Answer 1

这是解决方案

https://codepen.io/parthjasani/pen/gvaOBR

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  background:#000;
  padding:10px;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}