Flexbox无固定宽度布局 仅内部容器显示横向滚动条方案

完全可以在不设置任何固定宽度、保留外层容器display: flex属性的前提下实现目标效果。

问题根源 #

这是Flex布局的默认行为导致的：弹性子项默认min-width值为auto，规则要求弹性子项无论怎么收缩，宽度都不能小于内部内容的最小宽度。你代码里5000px宽的米色内容块会顺着DOM层级向外撑开，最终把右侧黄色容器、外层flex容器都撑得超过视口宽度，触发整个页面的横向滚动条，红色容器设置的overflow-x: auto根本没有生效的机会。

修复方法 #

只需要给两层容器补充min-width: 0属性即可，不需要改动其他原有逻辑：

• 给右侧带flex-grow: 1的黄色弹性子项添加min-width: 0，覆盖默认的min-width: auto规则，允许它收缩到flex容器分配的剩余宽度，不会被内部超宽内容撑开
• 给黄色容器内部、红色容器外层带margin: 20px的div添加min-width: 0，让这层普通块级元素也能跟随父级宽度收缩，避免被内部超宽内容撑开

修复后完整代码 #

<!-- 完全保留原有display: flex属性 -->
<div style="display: flex; flex-direction: row; height: 100%;">

   <div style="background-color: pink;">
      <div style="padding: 20px; background-color: blue;">Menu Item A</div>
      <div style="padding: 20px; background-color: purple;">Menu Item B</div>
      <div style="padding: 20px; background-color: violet;">Menu Item C</div>
   </div>

   <div style="background-color: yellow; flex-grow: 1; min-width: 0;">
      <div style="margin: 20px; min-width: 0;">
         <!-- 红色容器原有overflow-x: auto正常生效，仅该区域显示横向滚动条 -->
         <div style="background-color: red; padding: 20px; overflow-x: auto;">
            <div style="width: 5000px; background-color: beige;">
               Content
            </div>
         </div>
      </div>
    
   </div>
</div>

效果说明 #

修复后左侧粉色菜单宽度自适应内容宽度，右侧黄色区域自动占满flex容器剩余宽度，超宽的米色内容只会触发红色容器的横向滚动条，整个页面不会出现全局横向滚动条，全程没有给任何元素设置固定宽度，完全符合Flex布局的实现需求。

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