将 flexbox 缩小到与最短框相同的高度

Question

我目前有一个 flexbox 布局，如下所示：

蓝色是 class="wrap"，橙色和所有三个黄色框包含在两个单独的 class="wrap_col" 中，每个黄色框都包含在 class="wrap_item" 中。

.wrap {
  display: flex;
  flex-flow: row wrap;
    margin: 0 auto;
}

.wrap_col {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.wrap_item {
  margin:10px;
  display: flex;
  flex:1 0 auto;
  flex-direction: column; 
}

如何缩小三个黄色框的高度，使其与橙色框的高度相同？你能将 flexbox 缩小到与最短盒子相同的高度吗？

Answer 1

实现此目的的一个简单方法是确保该类的两个列的高度.wrap-col相同（设置固定高度或设置height: 100%并让它们都填充元素的空间.wrap）。然后确保flex-shrink: 1所有弹性项目都设置为。

.wrap_item {
  margin:10px;
  display: flex;
  flex:1 1 auto;
  flex-direction: column; 
}

这是一个jsfiddle。尝试更改元素的高度.wrap，您可以看到框调整大小以适应。