使用媒体查询时Flexbox内容超出边界，求解决方案？

核心问题定位 #

你遇到的错位、溢出问题，大概率是以下两个原因导致：

• 未设置box-sizing: border-box，导致padding/margin额外撑开元素宽度，超出Flex容器边界
• 媒体查询触发后，未重置子元素的宽度、margin等属性，导致继承大屏样式引发布局混乱

修正后的完整代码示例 #

HTML（无需修改，保持原结构即可）

<div class="flex-container">
  <div class="content-block block-1">
    <!-- 你的内容 -->
  </div>
  <div class="content-block block-2">
    <!-- 你的内容 -->
  </div>
</div>

CSS（关键修改已标注）

/* 全局重置，解决宽度计算问题 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 核心：padding/border计入元素总宽度 */
}

.flex-container {
  width: 90%;
  max-width: 1200px;
  margin: 2rem auto;
  display: flex;
  gap: 1.5rem; /* 用gap替代子元素margin，避免双倍间距问题 */
}

.content-block {
  padding: 1.2rem;
  border-radius: 8px;
  background: #f5f5f5;
  overflow-wrap: break-word; /* 处理长文本溢出 */
}

/* 大屏60%/40%布局 */
.block-1 {
  flex: 0 0 60%; /* 固定宽度60%，不收缩不拉伸 */
}

.block-2 {
  flex: 0 0 40%; /* 固定宽度40%，不收缩不拉伸 */
}

/* 小屏堆叠布局 */
@media (max-width: 850px) {
  .flex-container {
    flex-direction: column; /* 改为垂直堆叠 */
  }

  .block-1, .block-2 {
    flex: 1 1 100%; /* 重置为100%宽度，可自适应拉伸 */
    margin: 0; /* 清除可能继承的大屏margin */
  }
}

关键修改说明 #

1. 全局box-sizing: border-box：彻底解决padding/margin撑开元素宽度导致的溢出问题，所有元素的宽度计算包含padding和border。
2. 用gap替代子元素margin：父容器的gap属性会自动处理子元素之间的间距，避免大屏时左右间距、小屏时上下间距的双倍margin问题。
3. 媒体查询中重置子元素宽度：将子元素的flex属性改为1 1 100%，确保小屏时占满容器宽度，同时清除可能的大屏margin。
4. 内容溢出处理：overflow-wrap: break-word强制长文本换行，避免撑破容器；如果是滚动类内容，可替换为overflow: auto添加滚动条。

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