html - flex-container 遍历兄弟容器

Question

我有一个 flex-container，它有一个属性 div作为它的兄弟-

我已将 flex-container 设置为，display: flex; flex-wrap: wrap;但问题是当它包装时，它的项目会越过属性字段-

我确实尝试设置display: block为attribution字段，但它不起作用。我还尝试将包含 this和字段的父容器 ( footer) 设置为，以制作一个弹性项目，但它仍然不起作用。display: flexflex-containerattributionattribution

当我在调试工具中将鼠标悬停在容器上时，我看到大小没有改变，但弹性项目已经溢出。

你能帮我找出问题吗？

#footer {
    padding: 5% 10%;
    background: getColor(light-gray-bg);
}
.references {
        display: flex;
        flex-flow: row wrap;
        gap: 20%;
}
.references div {
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.references h6 {
    font-size: 1em;
    margin-bottom: 5vh;
    color: getColor(dark-grayish-violet);
}

.references a {
     font-size: 0.9em;
     font-weight: bold;
     color: gray;
}
.attribution {
        display: block;
        margin-top: 3vh;
        font-size: 11px;
        text-align: center;
}
.attribution a {
    color: #a33e70;
}

<section id="footer">

        <!-- References -->
        <section class="references">
            <div class="our-company">
                <h6>Our company</h6>
                
                <a href="#">How we work</a>
                <a href="#">Why Insure?</a>
                <a href="#">View plans</a>
                <a href="#">Reviews</a>
            </div>

            <div class="help-me">
                <h6>Help me</h6>
                
                <a href="#">FAQ</a>
                <a href="#">Terms of use</a>
                <a href="#">Privacy policy</a>
                <a hred="#">Cookies</a>
            </div>

            <div class="contact">
                <h6>Contact</h6>
                
                <a href="#">Sales</a>
                <a href="#">Support</a>
                <a href="#">Live chat</a>
            </div>
            
            <div class="others">
                <h6>Others</h6>
                
                <a href="#">Careers</a>
                <a href="#">Press</a>
                <a href="#">Licenses</a>
            </div>
        </section>
        
        <div class="attribution">
            Challenge by <a     href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
            Coded by <a href="https://frontendmentor.io/profile/sapinder-pal">Sapinder</a>.
        </div>
    </section>

标签： htmlcssflexbox