Angular flex-layout wrong overflow

Question

I want to use Angular's flexLayout. Problem is, when I try to overflow flexible content, it wont be. When content is larger than its container, it simply "overgrow" it's container.

I have found solition, but Intrinsic & Extrinsic Sizing suport is poor at this moment.

Here is an plunker example. I have tried min-height prop:

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

It worked on chrome. Is there any different solution to do min-height: min-content; result ?

Edit: I found out that this example, works fine on Firefox and Edge only chrome has problem as shown on screenshot.

Answer 1

If you restrict the height of the div elements and their content overflows their size, you can use the CSS overflow property to adjust the behavior. So if you add overflow: auto; or overflow: hidden; to your .card-wrapper class definition, the cards will get scrollbars or just hide the overflowing texts.

Edit:

To achieve the same result as with min-height: min-content, just remove the flex attribute of the div.detail-content-wrapper element and set the following ones:

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

You can check the modified plunker.