带子项的自动折叠 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; }
}