我目前正在尝试为我的网站创建一个导航栏。导航栏是使用ul容器实现的，该容器被设置为display: flex。这个flexbox中的大多数项目都是包含锚元素的li标签，但第一个li包含一个svg（一个徽标）。
我试图通过利用ul的隐式align-items: stretch，使svg响应性地缩放到与锚元素相同的高度。我希望使用svg的原始纵横比和高度自动计算宽度。
我可以通过将height: 100%添加到svg本身和其父标记<a>中来使svg缩放到正确的高度。这会产生意外的副作用，使父标记li的宽度为0。这会导致flexbox错误地分隔元素。我'我在Chrome和Firefox上都试过了，结果都是一样的，所以看起来这很可能是预期的功能。
有人能帮我解释一下如何在不需要硬编码值的情况下解决这个问题，同时仍然满足上面的要求吗？
第一个