为什么我要指定高度:0,即使我在CSS3flexbox中指定了flex-basis:0？

我无法理解这种行为.我理解这flex-basis是一个决定元素初始高度的属性(因为flex-direction设置为column),并且flexbox根据flex-grow属性将剩余高度除以元素.

那么在这种情况下,因为text-wrap's flex-basis(初始高度)被设置为0并且它是唯一具有该属性的元素,所以flex-grow不应该将高度固定到flex容器的其余部分吗？为什么会发生这种情况？

另外,为什么我要指定height: 0属性text-wrap以使我的代码工作？

非常感谢.

您的代码是正确的并且可以正常工作。

您只需要考虑一个Flexbox功能：

flex容器的初始设置是 min-height: auto。这意味着，默认情况下，弹性项目不能短于其内容。覆盖此设置后，布局将按预期工作。

您可以使用height: 0，但这是标准方法：

.text-wrap {
    flex: 1 0 0;
    min-height: 0; /* new */   
}

此处有完整说明：为什么弹性项目不会缩小到内容大小以上？

.text-wrap {
    flex: 1 0 0;
    min-height: 0; /* new */   
}

.flex {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 150px;
  border: 1px solid #ddd;
}
.title {
  height: 50px;
  line-height: 50px;
  background: #eee;
}
.text-wrap {
  flex: 1 0 0;
  min-height: 0; /* new */
}
.text {
  height: 100%;
  overflow-y: auto;
}