Html 角形材料设计布局=”；“世界其他地区”；内容与窗口重叠

下面是我的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>

第2周

这就产生了：

---

红色轮廓是浏览器的实际宽度。为什么第五项要经过那一行而不是下一行呢？

事实上，我只是将

布局包装到
，它会自动包装内容

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


第2周
他们试图在任何可用空间内进行调整，不尊重他们需要最小空间的事实，而在您的情况下，最小空间恰好大于提供的屏幕宽度。所以，如果你想让他们伸展，你需要给他们更多的空间，可以是下一行（即你需要提供包装），或者你需要提供一个水平卷轴