一些CSS规则-解决屏幕溢出

宽度防溢出

原始代码

/* 自定义bbtalk的宽度当aside隐藏时自适应recent-posts的宽度 */
div#content-inner.layout {
  display: flex;
  max-width: 1400px;
}

div#recent-posts.recent-posts {
  max-width: 1400px;
  flex: 1;
}

div#main_top.main_top {
  width: calc(100% - 0%); /* initial width when aside is visible */
}

@media (max-width: 1300px) {
  div#main_top.main_top {
    width: 100%; /* adjust width when aside is hidden */
  }
}

/* Hide aside for demonstration */
div#aside-content.aside-content.hidden {
  display: none;
}

/* Adjust .recent-post-items width when aside is hidden */
div#recent-posts.recent-posts.nc.adjust {
  width: 77%;
}

解决思路

我帮你分析了一下，你这个 .recent-posts 超出屏幕边界的原因，很可能是 父容器和子容器的宽度计算叠加，再加上 max-width 和 width 的混用，导致在某些情况下总宽度超过了视口（viewport）。
父容器 #content-inner.layout

你给它 max-width: 1400px，但它本身是 display: flex，如果子元素宽度写死（比如 77%）+ 另一个子元素的宽度（哪怕是 0%），可能会超出。

.recent-posts 的宽度冲突

你同时给了 max-width: 1400px 和 width: 77%（在 .nc.adjust 时），这会让它在某些屏幕宽度下计算结果大于父容器宽度。

box-sizing 影响

如果 .recent-posts 或父容器有 padding / border，在 box-sizing: content-box 下会额外增加宽度，导致溢出。

flex 子项默认最小宽度

在 flex 布局中，子项的 min-width 默认是 auto，会根据内容撑开，可能突破父容器。

你可以这样改，保证它不会超出屏幕边界：

div#content-inner.layout {
  display: flex;
  max-width: 100%; /* 让它跟随屏幕宽度 */
  box-sizing: border-box;
  overflow-x: hidden; /* 防止横向滚动条 */
}

div#recent-posts.recent-posts {
  flex: 1;
  max-width: 100%; /* 避免超过父容器 */
  box-sizing: border-box;
}

div#recent-posts.recent-posts.nc.adjust {
  width: 100%; /* 或者用 flex: 1; 让它自适应 */
}

div#main_top.main_top {
  flex: 1; /* 用 flex 代替 calc 宽度计算 */
  min-width: 0; /* 防止内容撑开 */
}

核心思路
父容器用 max-width: 100%，不要固定 1400px，这样在小屏下不会超出。

子容器用 flex: 1 而不是百分比宽度，让它自动分配空间。

加 min-width: 0，防止 flex 子项被内容撑破。

用 box-sizing: border-box，让 padding 和 border 计入宽度计算。

如果你想保留 1400px 的最大宽度，但又不想超出，可以这样：

div#content-inner.layout {
  display: flex;
  max-width: 1400px;
  margin: 0 auto; /* 居中 */
  box-sizing: border-box;
}

div#recent-posts.recent-posts {
  flex: 1;
  min-width: 0;
}

我建议你先试 min-width: 0 + flex: 1 这个组合，很多 flex 溢出问题都是它引起的。 如果你愿意，我可以帮你直接改成 既保留 1400px 最大宽度，又在小屏下自适应 的完整 CSS，这样就不会再出现超出的问题。

目标
保留最大内容宽度 1400px（居中显示）。

小屏下自适应，不产生横向溢出。

修复 .recent-posts 在 flex 布局中被内容撑破的情况。

/* 1) 全局安全网：边框盒模型 + 去除默认外边距 */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; }

/* 2) 容器：最大宽度 1400px，左右内边距形成安全边距，小屏自适应 */
div#content-inner.layout {
  display: flex;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;           /* 居中 */
  padding: 0 16px;          /* 两侧安全边距，避免贴屏 */
  gap: 24px;                /* 主区与侧栏间距 */
  overflow-x: hidden;       /* 防止偶发横向滚动 */
}

/* 3) 主区 recent-posts：弹性自适应，禁止被内容撑破 */
div#recent-posts.recent-posts {
  flex: 1 1 auto;           /* 占满剩余空间 */
  min-width: 0;             /* 关键：允许内容在容器内换行/收缩 */
  max-width: 100%;
}

/* 4) 顶部主容器（如果存在）：不要用 calc，转为弹性适配 */
div#main_top.main_top {
  flex: 1 1 auto;
  min-width: 0;             /* 同样防止溢出 */
  width: auto !important;   /* 清除旧的 width: calc(...) 影响 */
}

/* 5) 侧栏隐藏时：直接移出布局 */
div#aside-content.aside-content.hidden {
  display: none !important;
}

/* 6) 覆盖旧规则：以前 77% 会导致在某些宽度下溢出，统一改为自适应 */
div#recent-posts.recent-posts.nc.adjust {
  width: 100% !important;   /* 或者删除该选择器，保持上面的 flex 行为 */
  max-width: 100%;
  min-width: 0;
}

/* 7) 小屏断点：栈式布局，组件全宽 */
@media (max-width: 1024px) {
  div#content-inner.layout {
    flex-direction: column;
    gap: 16px;
    padding: 0 12px;        /* 略收窄安全边距 */
  }
  div#recent-posts.recent-posts,
  div#main_top.main_top {
    width: 100% !important;
    max-width: 100%;
  }
}

/* 8) 图片与内嵌媒体防溢出 */
img, video, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 9) 文章卡片内部可滚区域（如有复杂代码块/表格） */
div#recent-posts.recent-posts .card,
div#recent-posts.recent-posts .post-item {
  min-width: 0;             /* 防止子项 min-content 尺寸撑破布局 */
  overflow-wrap: anywhere;  /* 长单词/URL 断行 */
}

说明
核心修复点是给 flex 子项加上 min-width: 0，并取消百分比宽度叠加（例如旧的 77%）。这能从根源解决 recent-posts 被内容撑出屏幕的问题。

保留了 max-width: 1400px + margin: 0 auto 的居中策略，同时通过 width: 100% 和左右 padding 实现小屏自适应与安全边距。

使用一个断点将布局切到纵向栈式。你可以把 1024px 调整为你主题常用的断点（如 1200px 或 992px）。

修改后的代码

/* 自定义bbtalk的宽度当aside隐藏时自适应recent-posts的宽度 */
div#content-inner.layout {
  display: flex;
  max-width: 1400px;
}

div#recent-posts.recent-posts {
  min-width: 0;   /* 只是改了这里，防止 flex 子项被内容撑破 */
  flex: 1;
}

div#main_top.main_top {
  width: calc(100% - 0%); /* aside 可见时的初始宽度 */
}

@media (max-width: 1300px) {
  div#main_top.main_top {
    width: 100%; /* aside 隐藏时调整宽度 */
  }
}

/* 隐藏 aside 进行演示 */
div#aside-content.aside-content.hidden {
  display: none;
}

/* 隐藏 aside 时调整 .recent-post-items 宽度 */
div#recent-posts.recent-posts.nc.adjust {
  width: 77%;
}