title: Angular flex-layout wrong overflow
body: <p>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.</p>
  
  <p>I have found solition, but <a href="https://caniuse.com/#search=Intrinsic%20%26%20Extrinsic%20Sizing" rel="nofollow noreferrer">Intrinsic &amp; Extrinsic Sizing</a> suport is poor at this moment.</p>
  
  <p>Here is an plunker <a href="https://plnkr.co/edit/1vR9Ok3HwBgc5iO9rrif?p=preview" rel="nofollow noreferrer">example</a>. I have tried <code>min-height</code> prop:</p>
  
  <pre><code>.detail-row-item{
    // min-height: min-content; //good solution, but poor browser suport
  }
  </code></pre>
  
  <p>It worked on chrome. Is there any different solution to do <code>min-height: min-content;</code> result ?</p>
  
  <p>Edit:
  I found out that this example, works fine on Firefox and Edge only chrome has problem as shown on screenshot.
  <a href="https://i.stack.imgur.com/GLLlF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GLLlF.png" alt="Chrome"></a></p>