如何让<main>内容显示在<nav>内容右侧？CSS布局求助

我无法让<main>内容显示在<nav>内容的右侧，反而出现在其下方。以下是简化后的HTML与CSS代码：

CSS代码 #

.navigationContainer {
  display: flex;
  flex-direction: column;
  width: 243px;
  min-width: 0;
  max-width: 242.91015625px;
  height: 1117px;
  background-color: #374151;
}

.mainContent {
  padding-left: 20%;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  margin: 16px 50px 50px 0;
  min-width: 0;
  max-width: 1380.60546875px;
}

HTML代码 #

<nav class="navigationContainer">
  ... navigation
</nav>
<main class="mainContent">
  ... some content
</main>

我知道问题出在CSS上，但不清楚需要修改哪些部分才能实现预期布局，恳请帮助。

问题核心是没有给<nav>和<main>的父容器设置弹性布局，两个元素默认以块级元素形式垂直排列。按以下步骤修改即可：

1. 给父容器添加弹性布局
   如果<nav>和<main>直接在<body>标签下，给<body>设置display: flex；如果有外层容器，就给外层容器设置这个样式：

   body {
     display: flex;
     margin: 0; /* 清除默认边距避免布局偏移 */
   }
   

2. 调整主内容区的内边距
   原代码中.mainContent的padding-left: 20%会占据过多横向空间，建议替换为固定值或按需调整：

   .mainContent {
     padding-left: 2rem; /* 替换为合适的固定值，或根据需求删除 */
   }
   

3. 可选：让主内容区填充剩余空间
   给.mainContent添加flex: 1，使其自动占据<nav>右侧的所有剩余空间：

   .mainContent {
     flex: 1;
   }
   

修改后的完整CSS示例：

body {
  display: flex;
  margin: 0;
}

.navigationContainer {
  display: flex;
  flex-direction: column;
  width: 243px;
  min-width: 0;
  max-width: 242.91015625px;
  height: 100vh; /* 改用视口高度适配不同屏幕 */
  background-color: #374151;
}

.mainContent {
  flex: 1;
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  margin: 16px 50px 50px 0;
  min-width: 0;
  max-width: 1380.60546875px;
}

完成修改后，<nav>会固定在左侧，<main>会自动填充右侧剩余空间，实现横向排列的预期布局。

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