最稳妥的侧边栏固定+主内容自适应布局用 display: flex；.sidebar 设固定宽260px，.main 必须设 flex: 1 和 min-width: 0；侧边栏滚动需 height: calc(100vh - 64px) + overflow-y: auto；图片和代码块需 max-width: 100%、pre 加 overflow-x: auto；收起时需同步修改 .main 为 width: 100%。
侧边栏固定宽度 + 主内容自适应的 flex 布局写法
用 display: flex 是目前最稳妥的方案，避免浮动或绝对定位带来的流式断裂问题。主区域必须设 flex: 1，否则在小屏下会溢出或塌陷。
.container {
display: flex;
}
.sidebar {
width: 260px; /* 固定宽度，不建议用 % */
}
.main {
flex: 1; /* 关键：撑满剩余空间 */
min-width: 0; /* 防止内容过长时 flex 项不收缩 */
}- 别给
.main设width: 100%—— 它会和.sidebar冲突，导致换行 -
min-width: 0必须加，否则内部text-overflow: ellipsis或长单词可能失效 - 如果侧边栏需要响应式隐藏，用
flex: none+display: none组合，不要只靠display
侧边栏滚动独立于主内容的 overflow 处理
用户常误以为给 .sidebar 加 overflow-y: auto 就够了，但实际需配合高度约束，否则滚动条不会出现。
.sidebar {
height: calc(100vh - 64px); /* 减去 header 高度 */
overflow-y: auto;
}
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
background: #ccc;
}- 高度必须是「可计算值」，
height: 100%在 flex 容器里通常无效 - 用
calc()比 JS 动态算更轻量，也避免 SSR 渲染错位 - 滚动条样式仅在 WebKit 内核生效；若需全平台统一，得用第三方库（如
simplebar）
博客正文图片与代码块的宽度越界问题
Markdown 渲染后的 <img alt="css布局项目实战_制作一个带有侧边栏的博客模板" > 和 <pre class="brush:php;toolbar:false;"></code> 默认按原始尺寸显示，极易突破 <code>.main</code> 宽度，尤其在移动设备上。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/761" title="Pliny"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6db26747b8162.png" alt="Pliny" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/761" title="Pliny">Pliny</a>
<p>创建、分享和重新组合AI应用程序</p>
</div>
<a href="/ai/761" title="Pliny" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><pre class="brush:php;toolbar:false;">.main img,
.main pre {
max-width: 100%;
box-sizing: border-box;
}
.main pre {
overflow-x: auto; /* 横向滚动代替折行 */
padding: 1rem;
}</pre><ul>
<li>
<code>max-width: 100% 必须作用于具体元素，不能只写在 .main 上
overflow-x: auto 对 <pre class="brush:php;toolbar:false;"></code> 更友好 —— 保留缩进和语法高亮完整性</li><li>如果用了 Prism.js，注意它生成的 <code><code></code> 嵌套层级深，选择器要写全：<code>.main pre code</code></li></ul><H3>移动端侧边栏收起后内容区宽度未重占的问题</H3><p>用 <code>transform: translateX(-100%)</code> 隐藏侧边栏时，<code>.main</code> 的宽度不会自动扩展，视觉上仍留白。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><pre class="brush:php;toolbar:false;">.sidebar.collapsed {
transform: translateX(-100%);
}
.container.sidebar-collapsed .main {
flex: none;
width: 100%;
}</pre><ul>
<li>不能只动侧边栏，必须同步调整 <code>.main 的 flex 行为 —— 否则它还“记得”原来要让出 260px.sidebar 上，但 transition: transform .3s ease，别加在 width 上（会触发重排）侧边栏布局真正难的不是怎么“放上去”，而是各种边界场景下的行为一致性：小屏折叠后是否留白、长代码块是否截断、图片在 Retina 屏是否模糊、滚动是否卡顿……这些细节堆起来，才决定用户愿不愿意多看两篇文章。
