角度彈性佈局錯誤溢出

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; 
}