Flexbox实现左侧单侧边栏、右侧上下双区域布局问题求助

问题根源 #

• 外层flex容器#body设置了flex-direction: column，所有子元素默认垂直排列，无法实现左右分栏
• 侧边栏#searchbox配置了flex: 0 0 100%，强制占满整行宽度，没有剩余空间给右侧内容
• 缺少包裹右侧header和正文的容器，两个元素直接和侧边栏同级的情况下，无法在同一侧垂直堆叠

修正步骤 #

1. 调整HTML结构

新增右侧内容容器，包裹header和正文部分：

<nav id="body">
  <div id="searchbox">
    <label class="label" for="email">E-mail:</label>
    <input name="email" id="email" type="text">
    <br>
    <label class="label" for="pass">Password:</label>
    <input name="pass" id="password" type="password">
    <button class="button">Login</button>
    <button class="button">Register</button>
  </div>
  <!-- 新增右侧容器 -->
  <div id="right-container">
    <div id="container_head"></div>
    <div id="container_body"></div>
  </div>
</nav>

2. 调整CSS配置

仅列修改/新增部分，其余原有样式保持不变：

/* 外层容器调整为横向排列 */
#body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
}

/* 侧边栏调整宽度配置，移除float和错误的flex设置 */
#searchbox {
  top: 10px;
  position: relative;
  flex: 0 0 100px; /* 固定宽度100px，不收缩不放大 */
  order: 1;
}

/* 新增右侧容器样式，内部垂直排列 */
#right-container {
  flex: 1; /* 占满侧边栏之外的所有剩余宽度 */
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

/* header移除多余的width、margin-left和order配置 */
#container_head {
  background-color: var(--color-secondary);
  height: 30px;
  flex: 0 0 30px;
}

/* 正文移除多余的width、margin-left和order配置 */
#container_body {
  background-color: var(--color-secondary);
  height: 350px;
  margin-top: 10px;
}

内容的提问来源于stack exchange，提问作者João Silva