如何在Flexbox布局中正确嵌入横向滚动菜单

这个问题我碰到过好几次啦，根源在于Flexbox项目的默认min-width:auto属性在搞鬼！当你把横向滚动菜单放到main容器里时，main作为flex-grow:1的Flex项目，默认会优先保证它的子元素能完整显示，不会主动收缩自己的宽度，这就导致标签栏把main的宽度撑得超出了屏幕可用空间，整个布局就崩溃了。

修复方案 #

只需要给main元素添加min-width: 0属性，让它可以收缩到容器的可用宽度内，这样里面的横向滚动菜单就能正常工作，不会撑爆布局了。修改后的完整代码如下：

修改后的CSS #

.layout { display: flex; }
nav { width: 200px; flex-shrink:0; border: 4px solid green; }
main { flex-grow:1; min-width: 0; /* 关键修复属性 */ }
.content { height: 50px; border: 4px solid blue; }

/* 原横向滚动菜单CSS保持不变 */
.tags-forest { border: 4px solid red; display: flex; flex-wrap: nowrap; }
.tags-leader { display: flex; flex: 0 0 130px; height: 40px; }
.tags-line { display: flex; flex-wrap: nowrap; overflow: auto; height: 60px; }
.tags-item { display: flex; flex: 0 0 auto; height: 30px; margin: 0 10px; background: #EEE; padding: 5px; }

嵌入后的完整HTML #

<div class="layout">
  <nav>120px nav</nav>
  <main>
    <div class="content"> content </div>
    <!-- 嵌入横向滚动菜单 -->
    <div class="tags-forest">
      <div class="tags-leader">Tags</div>
      <div class="tags-line">
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <!-- 可继续添加更多标签测试滚动效果 -->
      </div>
    </div>
  </main>
</div>

原理说明 #

• Flexbox的min-width:auto默认行为会让Flex项目（这里的main）不会收缩到小于其内容的最小宽度，当内容是横向滚动容器时，这个最小宽度会被标签栏的总宽度撑开，导致布局溢出屏幕。
• 添加min-width:0后，main的最小宽度被重置为0，它会优先适应父容器layout的可用宽度，里面的tags-line因为设置了overflow:auto，就会在main的宽度范围内出现横向滚动条，而不会撑爆整个布局。

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