角度弹性布局错误溢出

Question

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

我已经找到了孤独症，但此时此刻Intrinsic & Extrinsic Sizing的支持不佳。

这里是一个运动员example。我试过min-height道具：

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

它在铬上工作。 min-height: min-content;结果有什么不同的解决方法吗？

编辑： 我发现这个例子，在Firefox和Edge上工作正常，只有chrome有问题，如截图所示。

Answer 1

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

编辑：

要达到相同的结果与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; 
}