html - Angular Material Design 布局 ="row"内容与窗口重叠

Question

这是我的 HTML

<div id="someId">
    <div layout="column" layout-padding>
        <h3 class="someClass" align="center">Week 2</h3>
        <div layout="row"  style="outline: 1px solid red">

            <!-- <div ng-repeat="doge in Doges">
                // contents
            </div> -->

        </div>
    </div>
</div>

产生这个: 红色轮廓是浏览器的实际宽度。为什么第 5 项通过它而不是下一行？

Answer 1

其实我只是layout-wrap至 <div layout="row" style="outline: 1px solid red">它会自动包装内容。

<div id="someId">
    <div layout="column" layout-padding>
        <h3 class="someClass" align="center">Week 2</h3>
        <div layout="row" layout-wrap  style="outline: 1px solid red">

            <!-- <div ng-repeat="doge in Doges">
                // contents
            </div> -->
        </div>
    </div>
</div>