javascript - 角度弹性布局错误溢出

Question

我想使用 Angular 的 flexLayout。问题是，当我尝试溢出灵活的内容时，它不会。当内容大于其容器时，它只是“过度生长”它的容器。

我找到了解决方案，但目前内在和外在尺寸支持很差。

这是一个笨拙的例子。我试过min-height道具：

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

它适用于铬。有没有不同的解决方案来做min-height: min-content;结果？

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

score 0 · Accepted Answer

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

编辑：

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

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

score -1 · Accepted Answer

-1

在您的 CSS 文件中添加如下内容。

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

于 2017-09-22T08:58:13.693 回答

2 回答 2