HTML <pre><code>标签溢出而非换行导致Flex布局间距异常问题

云上老周

2026-8-9

Flex布局下代码块撑开面板的修复方案

问题场景

使用Flexbox布局实现两个等宽并排面板，其中一个面板包含<pre><code>包裹的代码块。预期两个面板通过flex: 0.5保持等宽，但代码块会撑开右侧面板，破坏布局。尝试white-space: pre-wrap会导致代码自动换行，不符合需求；固定宽度无法适配任意面板尺寸；设置width:100%无效果。

问题根源

Flex容器的子项（.panel）默认min-width: auto，会被内部宽内容撑开，无法遵守flex:0.5的比例限制
<pre>标签默认会根据内容宽度撑开，不会自动收缩适配父容器

修复方案

通过以下CSS调整解决：

给.panel添加min-width: 0，解除flex项的最小宽度限制，使其能按flex比例收缩
调整<pre><code>的样式，让代码块自适应父容器宽度，超出部分显示横向滚动条
修正全局选择器的语法错误（原代码中.*应为*）

修正后的完整CSS

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 让body占满视口高度，优化布局 */
}

pre {
    display: block;
    overflow: auto;
    margin: 1rem;
}

pre code {
    display: block;
    white-space: pre;
    padding: 1rem;
    width: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    margin: 1rem;
    gap: 1rem;
    width: 100%; /* 让容器适应视口宽度 */
    max-width: 1200px; /* 可选，限制最大宽度避免过宽 */
}

.box {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.panel {
    display: flex;
    flex-direction: column;
    flex: 0.5;
    padding: 1rem;
    min-width: 0; /* 关键：解除flex项最小宽度限制 */
    border: 1px solid #eee; /* 可选，添加边框方便查看面板范围 */
}