Flexbox 列高

Question

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

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

Answer 1

因为 flex 是 shorthand 属性，flex: 1 变成

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

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

.row {
  flex-basis: 0;
}