Justify-另一个 Flexbox 内的 Flexbox 内容样式不起作用

Question

我在另一个 Flexbox 中有一个 flexbox，样式为 justify-content 设置为 space- Between 但由于某种原因 样式不适用 并且子元素仍然彼此相邻。

#nav {
  height: 100px;
  border-bottom: 1px solid black;
  box-shadow: 0 1px 10px black;
  display: flex;
  align-items: center;
}

#logo {
  height: 70%;
}

#nav-links {
  display: flex; 
  justify-content: space-between;
  position: absolute;
  right: 5px;
}

<nav id="get-started-nav">
  <svg id="logo"></svg>
  <div id="nav-links">
    <Link to="/about">About</Link>
    <Link to="/login">Login</Link>
  </div>
</nav>

我尝试删除“位置：绝对；” style，从父元素中删除flexbox和align items样式，但这些没有做任何事情。 Flexbox 还有足够的扩展空间，但事实并非如此。我将不胜感激任何帮助，因为我只是看不到我的代码中的错误。

Answer 1

只需在

width

中添加一些

flex-grow:1

或

#nav-link

即可。如果您要添加 flex-grow 那么您必须在

flex-shrink:0

中添加

Logo

.