将flexbox收缩到最短盒子的相同高度

Question

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

蓝色是class =＆＃34; wrap＆＃34 ;,橙色和所有三个黄色框都包含在两个单独的class =＆＃34; wrap_col＆＃34;中，每个黄色框包含在class =＆ ＃34; wrap_item＆＃34 ;.

.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; 
}

如何缩小三个黄色框？高度下降，以便它与橙色盒子的高度相同？你可以将柔性箱缩小到与最短盒子相同的高度吗？

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元素的高度，您可以看到调整大小以适合的方框。