使用Flex布局时负margin消双重边框失效问题排查

问题成因 #

• min-width计算逻辑冲突：你给.glossary-letter设置的min-width: calc((100% / 13) + 0.1rem)和负margin逻辑矛盾。额外的+0.1rem会让元素实际宽度超出预期，导致相邻元素的边框无法完全重叠，残留双重边框。
• Flex宽度分配干扰：flex: 1会强制元素拉伸填充剩余空间，当容器宽度不是13的精确倍数时，元素宽度被打乱，破坏了负margin实现边框重叠的布局逻辑，部分边框无法被相邻元素覆盖。

修复步骤 #

1. 修正min-width计算：移除min-width中的+0.1rem，让元素基础宽度刚好是容器的1/13，配合负margin完全抵消边框宽度，确保相邻边框重叠。
2. 调整Flex属性：将flex: 1改为flex: 0 1 calc(100% / 13)，明确元素基础宽度，同时允许必要时收缩，避免宽度分配不均。
3. 父容器添加overflow:hidden：防止负margin导致元素边框溢出容器，保证布局完整性。

修改后的完整代码 #

.glossary-wrapper a:focus,
.glossary-wrapper a:hover {
    background-color: #f0f4f8;
    color: #486581;
}

.glossary-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
}

.glossary-wrapper .glossary-letter {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    transition: 0.2s ease-in-out;
    align-items: center;
    border: 0.1rem solid #a4b2c0;
    color: #829ab1;
    display: inline-flex;
    flex: 0 1 calc(100% / 13);
    height: 3rem;
    justify-content: center;
    margin-bottom: -0.1rem;
    margin-right: -0.1rem;
    min-width: calc(100% / 13);
    text-transform: uppercase;
}

@media only screen and (min-width: 1367px) {
    .glossary-wrapper .glossary-letter {
        flex: 0 1 auto;
        min-width: 3rem;
    }
}

<div class="glossary-wrapper">
<a href="#letter-a" class="glossary-letter">A</a>
<a href="#letter-b" class="glossary-letter">B</a>
<a href="#letter-c" class="glossary-letter">C</a>
<a href="#letter-d" class="glossary-letter">D</a>
<a href="#letter-e" class="glossary-letter">E</a>
<a href="#letter-f" class="glossary-letter">F</a>
<a href="#letter-g" class="glossary-letter">G</a>
<a href="#letter-h" class="glossary-letter">H</a>
<a href="#letter-i" class="glossary-letter">I</a>
<a href="#letter-j" class="glossary-letter">J</a>
<a href="#letter-k" class="glossary-letter">K</a>
<a href="#letter-l" class="glossary-letter">L</a>
<a href="#letter-m" class="glossary-letter">M</a>
<a href="#letter-n" class="glossary-letter">N</a>
<a href="#letter-o" class="glossary-letter">O</a>
<a href="#letter-p" class="glossary-letter">P</a>
<a href="#letter-q" class="glossary-letter">Q</a>
<a href="#letter-r" class="glossary-letter">R</a>
<a href="#letter-s" class="glossary-letter">S</a>
<a href="#letter-t" class="glossary-letter">T</a>
<a href="#letter-u" class="glossary-letter">U</a>
<a href="#letter-v" class="glossary-letter">V</a>
<a href="#letter-w" class="glossary-letter">W</a>
<a href="#letter-x" class="glossary-letter">X</a>
<a href="#letter-y" class="glossary-letter">Y</a>
<a href="#letter-z" class="glossary-letter">Z</a>
</div>

内容的提问来源于stack exchange，提问作者Mr. Fontastic