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

参考这个https://codesandbox.io/s/hidden-haze-xkrf6e?file=/src/App.js，我正在设计的网站（为了提高自己的技能）似乎（因为没有更好的词）在主页中有某种“分流”。要详细说明，请密切注意顶部的导航栏。一旦您单击“关于”，整个页面似乎会向右移动一点。只有主页受到这种方式的影响。

我尝试使用浏览器方便的“检查工具”自行解决问题。得出以下结论。

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

问题

即使我解决了上述问题，仍然存在影响主页方向的“最新明信片”元素。此外，当我删除“最新明信片”的高度属性时，一切都完美到位，就像我希望它出现的方式一样，除了这张卡片的高度是可变的这一事实。为了保持一致性，我希望这张卡片的高度是固定的（因为我会通过后端不断更新这张卡片的内容）。

请求其他开发者在这里阐明这个问题；如果有人能指出问题的根源是什么以及我如何解决它，我将不胜感激。