Angular flex-layout 错误溢出

Question

我想使用 Angular 的 flexLayout。问题是，当我尝试溢出灵活的内容时，它不会。当内容大于其容器时，它只是 "overgrow" 它是容器。

我找到了解决方案，但是 Intrinsic & Extrinsic Sizing 目前支持很差。

这是一个笨蛋example。我试过 min-height prop:

.detail-row-item{
  // min-height: min-content; //good solution, but poor browser suport
}

它在 chrome 上有效。 min-height: min-content; 结果有什么不同的解决方案吗？

编辑：我发现这个例子在 Firefox 和 Edge 上运行良好，只有 chrome 有问题，如屏幕截图所示。

Answer 1

如果您限制了 div 元素的高度并且它们的内容超出了它们的大小，您可以使用 CSS overflow property 来调整行为。因此，如果您将 overflow: auto; 或 overflow: hidden; 添加到 .card-wrapper class 定义中，卡片将获得滚动条或仅隐藏溢出的文本。

编辑：

要获得与 min-height: min-content 相同的结果，只需删除 div.detail-content-wrapper 元素的 flex 属性并设置以下属性：

.detail-content-wrapper {
  max-height: 50%; 
  overflow: auto;
}

您可以查看modified plunker。

Answer 2

在您的 CSS 文件中像下面这样添加。

    .card-wrapper.detail-card {
    overflow: auto;
}

Angular flex-layout 错误溢出

Angular flex-layout wrong overflow

javascript

css

flexbox

angular-flex-layout

angular