如何在设置flex:1的div容器中实现内部pre代码块水平滚动

核心原因 #

flex布局的直接子项默认min-width属性值为auto，会自动跟随内容宽度撑开，就算给外层flex项设置了flex:1，也会被pre里的长文本撑破容器，导致溢出滚动逻辑失效。

解决方案 #

只需补充两处样式配置即可：

• 给设置了flex:1的flex子项添加min-width: 0，打破默认的内容宽度适配规则
• 给<pre>标签本身添加溢出滚动、宽度限制和格式保留样式

最终可运行代码 #

<div style="display: flex;">
  <!-- flex:1的外层容器加min-width:0 -->
  <div style="flex: 1; min-width: 0;">
    <div style="max-width: 100%; overflow-x: auto;">
      <!-- pre标签补充必要样式 -->
      <pre style="overflow-x: auto; white-space: pre; margin: 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </pre>
    </div>
  </div>
</div>

效果验证 #

调整浏览器窗口宽度时，pre内的文本超出父容器宽度时会自动出现横向滚动条，不会撑破flex布局，也不会自动折行破坏源代码的格式展示。

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