html - 为什么 flex-wrap: wrap 移动 li 元素到屏幕上的下一行不减少？

Question

我试图让我的 li 的无序列表（ul class="main-nav-list"）移动到下一行，因为屏幕通过使用 flex-wrap: wrap 减小。目前，当我将它应用于 li 元素时，它们将移出屏幕而不是下一行。我已经尝试使用 flex-wrap: wrap 在我的代码的每一层中，你可以从注释掉的部分看到。

我的 HTML 是：

    <div class="main-image">
        <header class="header">

            <div class="main-nav">
                <ul class="main-nav-list">
                    <li>Home</li>
                    <li>About&nbsp;Us</li>
                    <li>Our&nbsp;Faith</li>
                    <li>Schedule</li>
                    <li>Patron&nbsp;Saint</li>
                    <li>Parish&nbsp;Hall</li>
                </ul>
            </div>
        </header>
    </div>

我的scss是：

.main-nav {
    height: 100%;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 60px;

    &-list{
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        flex: 1;

        & li {
            display: flex;
            flex-wrap: wrap;
            height: 100%;
            color: var(--color-white-1);
            font-size: 3rem;
            list-style: none;
            padding: 4rem;
            flex: 1;
        }
    }
}

标签： htmlcsssass