小屏幕下flex布局的pre标签如何避免内部code元素溢出

问题原因 #

你遇到的溢出问题由两处设置导致：

• pre上的width: 100%和min-width: 100%强制将pre的宽度限制为父容器宽度，当内部code内容宽度超过父容器宽度时，自然会溢出pre的边框
• pre作为flex容器的justify-content: center仅能在自身宽度范围内居中内容，不会主动撑开自身宽度匹配内容

解决方案 #

要让pre的宽度完全适配内部code的大小，只需要新增width: fit-content属性，同时删掉限制宽度的两行代码即可。如果你需要整个pre块在父容器中居中，额外加margin: 0 auto即可实现。

修正后的CSS代码如下：

pre {
    border: 1px solid black;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    /* 新增属性，让pre宽度完全适配内部内容 */
    width: fit-content;
    /* 可选：让整个pre块在父容器中居中 */
    margin: 0 auto;
}
code {
    display: inline-block;
    /* 可选：保证代码不换行，pre默认已携带该属性，可加来做兼容性兜底 */
    white-space: pre;
}

补充说明 #

width: fit-content目前兼容所有主流浏览器（Chrome、Firefox、Safari 11+、Edge），可以让元素宽度完全跟随内部内容宽度变化，不会被限制为父容器的100%宽度，刚好满足你不需要换行、容器完整容纳内容的需求。
如果需要兼容更老版本的浏览器，也可以把pre的display改为inline-block，再给pre的父元素设置text-align: center实现整体居中，效果完全一致。

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