Html 将FlexBox收缩到与最短框相同的高度

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

蓝色是class=“wrap”，橙色和所有三个黄色框包含在两个单独的class=“wrap\u col”中，每个黄色框包含在class=“wrap\u item”中

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

---

实现这一点的简单方法是确保

.wrap col

类的两个列的高度相同（设置固定高度或设置

高度：100%

并让它们都填充

.wrap

元素的空间）。然后确保将所有弹性项目设置为

flex-shrink:1

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

---

这是一本书。尝试更改

.wrap

元素的高度，您可以看到框的大小正在调整以适应需要。

是什么在两组框中创建了空间？您也应该发布您的标记，并给出您试图更改的当前布局的工作示例。问题被标记为重复，所以我无法提供答案。下面是我为解决您的特定代码而编写的一个提琴：。我的猜测是，您在项目上明确设置了高度。链接版本是一个完全相对的版本，其中高度设置在一个位置（

.wrap

元素），多亏了Dylan和@joseph，所以我需要为类wrap设置一个高度来实现这一点吗？嗨@Dave，是的，以便flex box收缩包含的flex项目，箱子本身必须以某种方式设置高度。如果没有设置高度，flexbox没有理由尝试缩小或扩大其内部项目以匹配其高度，它只会保留项目正常呈现的状态。包裹不需要设置高度，但我不知道这是否符合您的需要，因为我不知道您使用什么来调整盒子的大小。嗨@Alejalapeno你的意思是链接到我刚才专门为回答这个问题而创建的小提琴吗？它被修改了。您会注意到包装没有高度。

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