Flexbox列高度

Question

我有这个网站：http://kudos-topspindigital.azurewebsites.net/#/netball

如果您在Chrome和IE中打开此功能，您将看到我的问题。 基本上在铬合金中，右面板的高度大致相同。我希望底部面板（橙色和深灰色面板）的高度是顶部浅灰色面板的两倍。 一次，IE已经做对了。它实际上将底部面板调整为flex：2。 我怎么能让chrome做同样的事呢？

Answer 1

由于flex是简写属性，flex: 1变为

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

0%似乎在列布局中混淆了Chrome。您可以使用flex-basis: 0来修复它：

.row {
  flex-basis: 0;
}