如何让同空间的两个flexbox横向并列 解决header与main元素重叠问题

问题1：<header>和<main>重叠、纵向排列不生效的解决方案 #

你遇到的重叠问题核心原因是header或main设置了position: absolute/position: fixed，这类定位会让元素脱离正常文档流，:root上设置的flex布局无法识别脱离流的元素尺寸，自然无法实现纵向排列对齐。

修复步骤：

1. 移除header和main上的position: absolute/position: fixed属性，如果需要固定头部在页面顶部，改用position: sticky，该属性不会让元素脱离文档流，不会触发重叠问题：

header {
  position: sticky;
  top: 0;
}

2. 调整flex布局的挂载节点，建议挂载到body而非:root，同时清除默认边距避免错位：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 撑满整个视口高度 */
  margin: 0; /* 清除浏览器默认body边距 */
}
header, main {
  width: 100%;
  box-sizing: border-box; /* 边框、内边距不会撑大元素宽度 */
}

问题2：两个flexbox横向并排的解决方案 #

只需要给这两个flexbox的共同父容器设置flex布局即可，示例代码如下：

/* 两个flexbox的父容器 */
.flex-wrapper {
  display: flex;
  gap: 20px; /* 两个flexbox之间的间距，可自定义 */
  width: 100%;
  box-sizing: border-box;
}
/* 如果需要两个flexbox均分父容器宽度，给子元素加以下属性 */
.flex-wrapper > .flex-item {
  flex: 1;
  box-sizing: border-box;
}

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