Flex inside flex 导致方向问题

Question

我是 Web 开发和 React 的新手（在 CSS 方面相当业余），所以我对 flex 工作原理的理解肯定存在一些基本问题。

参考这个codesandbox，我正在设计的网站（为了提高自己的技能）似乎有（因为没有更好的词）某种'分流' 在主页中。要详细说明，请密切注意顶部的导航栏。一点击'About'，整个页面似乎都向右移动了一点点。只有主页受到这种影响。

我已经尝试使用浏览器的便捷工具 'inspect tools' 自行解决问题。得出以下结论。

• 似乎主页的宽度为 1519px，而所有其他页面的大小为 1536px。我无法理解为什么会有 15px 的差异。
• 试图隔离问题（通过删除所有元素并将它们一个接一个地添加回来以查看哪个是错误的），我意识到每当我在其中放置一个 flex 元素时都会引起这个 'shunt'另一个弹性元素。感谢其他 Whosebug 的回答，我发现 flex 元素的尺寸取决于父元素（这又是另一个具有模糊大小属性的 flex 元素）。

问题

即使我解决了上述问题，仍然存在影响主页方向的“latest-post-card”元素。此外，当我删除“latest-post-card”的高度 属性 时，一切都恰到好处，就像我希望它出现的方式一样，除了高度这张卡是可变的。为了保持一致性，我希望这张卡片的高度是固定的（因为我会通过后台动态更新这张卡片的内容）。

请求其他开发人员在这里阐明这个问题；如果有人能指出问题的根源以及我该如何补救，将不胜感激。

Answer 1

您所说的“分流”是由于其他页面占用的高度较小，因此不需要滚动条。当滚动条消失时，页面基本上会扩展滚动条的宽度，因此内容会稍微向右跳动。