html - 角度未正确环绕文本

Question

介绍

我正在创建一个简单的项目，并使用带有 flexlayout 的角度材料

问题

问题是它不能在较小的屏幕上正确包装文本，它要么剪切文本，要么只是使其大于容器。

代码

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

我想要的是

我在下一个堆栈闪电战中包含了另一个容器，它使用相同的 CSS 和 flexlayout，效果很好。我希望另一个容器使用 mat-list 相同

堆栈闪电战

堆栈闪电战

标签： htmlcssangularangular-materialangular-flex-layout