angular not wrapping text correctly - html

Question

intro
I am creating a simple project in angular and using angular material with flexlayout
problem
the problem is that it doesn't wrap the text correctly on smaller screens, it either clips text or just make it larger than the container.
code
html
<div class="container">
<h2>Normal</h2>
<div class="flex-container" fxLayout="row" fxLayout.xs="column wrap">
<div class="child-1">1. One</div>
<div class="child-2">2. Two</div>
<div class="child-3">3. Three</div>
</div>
<h2>Default</h2>
<div class="flex-container" fxLayout="row" fxLayout.xs="column wrap">
<div class="child-1" fxFlex>
<p>1. One</p>
<p>166.67px</p>
</div>
<div class="child-2" fxFlex>
<p>1. Two</p>
<p>166.67px</p>
</div>
<div class="child-3" fxFlex>
<p>1. Three</p>
<p>166.67px</p>
</div>
</div>
<h2>fxFlex with grow shrink values</h2>
<div class="flex-container" fxLayout="row" fxLayout.xs="column wrap">
<div class="child-1" fxFlex="2 1 auto">
<p> Angular fxFlex flexgrow flexshrink flexbasis</p>
<p>250px</p>
</div>
<div class="child-2" fxFlex>
<p>Angular fxFlex flexgrow flexshrink flexbasis</p>
<p>125px</p>
</div>
<div class="child-3" fxFlex>
<p>125px</p>
</div>
</div>
</div>
<div class="container">
<mat-list>
<div class="flex-container" fxLayout="row wrap" fxLayout.xs="column wrap">
<mat-list-item fxFlex>
<div mat-line> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias qui assumenda perferendis atque ipsa ipsum enim voluptate voluptas mollitia autem minima deleniti quisquam iste alias, accusantium, eveniet ut, rerum totam.</p></div>
</mat-list-item>
<mat-list-item fxFlex>
<div mat-line>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos molestiae, sequi fugiat tempora dicta numquam ipsam dolorem natus ducimus et expedita cum quaerat porro, cumque necessitatibus odit. Omnis, fugiat officia?</div>
<div mat-line> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio voluptatibus, rem blanditiis nobis, nemo, soluta velit molestiae repudiandae vel non atque accusantium ipsum deleniti saepe natus quam quasi quae fuga.</div>
</mat-list-item>
</div>
</mat-list>
</div>
CSS
.child-1 {
background-color: orange;
}
.child-2 {
background-color: yellow;
}
.child-3 {
background-color: green;
}
.container {
margin: 15px;
height: auto;
width: 95%;
border: 2px solid red;
text-align: center;
}
what i want
I included another container in the next stack blitz that uses the same CSS and flexlayout that works just fine. I want the other container to be the same using mat-list
stackblitz
stackblitz