如何在Flexbox导航栏中正确缩放SVG父元素的宽度？

问题出在.logo-container这个<li>元素上：它默认是inline-block，内部<a>标签设置height:100%后，没有足够的宽度约束，导致<li>宽度坍缩为0，破坏了Flexbox的间距排布。以下是无需硬编码尺寸的解决方案：

修改后的CSS代码 #

nav>ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    list-style: none;
    gap: 1em;
}

nav>ul>li {
    display: inline-block;
    text-align: center;
}

/* 调整logo容器的布局，让内部元素正确撑开宽度 */
nav>ul>li.logo-container {
    display: flex;
    align-items: center; /* 可选：让SVG在容器内垂直居中 */
}

nav>ul>li>a {
    display: inline-block;
    text-decoration: none;
    padding: 0;
}

nav>ul>li>a:not(.logo-container>a) {
    color: white;
    background-color: gray;
    padding: 2em;
}

.logo-container>a {
    height: 100%;
    display: flex; /* 让a标签成为flex容器，包裹SVG避免宽度坍缩 */
}

.nav-logo {
    height: 100%;
    width: auto; /* 关键：让SVG根据原始宽高比自动计算宽度 */
}

原理说明 #

1. 将.logo-container设为display: flex，使其子元素<a>能基于SVG内容自动计算宽度，同时继承父容器<ul>的拉伸高度。
2. 给.logo-container>a设置display: flex，确保它完全填充<li>的高度，同时正确包裹SVG，避免宽度丢失。
3. width: auto强制SVG根据自身宽高比和height:100%自动匹配宽度，既保证Logo不变形，又能撑开父级<li>的宽度，让Flexbox的gap间距正常生效。

内容的提问来源于stack exchange，提问作者McSlayR