如何在保留flex布局时让导航项适配小屏且受父容器宽度限制

问题 #

实现小屏幕下自适应导航时，给父元素设置max-width: 100%未生效，仅在移除display: flex属性时该设置才会起效，需要保留flex布局的前提下，让导航项始终受父容器宽度约束，实现横向可滚动的标签导航。

现有实现代码 #

HTML

<nav class="tabs">
    <li>
        <a href="#" class="tab active">
            All
            <span class="badge grey">151</span>
        </a>
    </li>
    <li>
        <a href="#" class="tab">
            Started
            <span class="badge grey">128</span>
        </a>
    </li>
    <li>
        <a href="#" class="tab">
            On Hold
            <span class="badge grey">15</span>
        </a>
    </li>
    <li>
        <a href="#" class="tab">
            Completed
            <span class="badge grey">8</span>
        </a>
    </li>
</nav>

CSS

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 1.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.tabs > * {
  flex-shrink: 0;
}

.tabs .tab {
  padding: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.tabs .tab.active {
  color: var(--color-heading);
}

.tabs .tab.active::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  position: absolute;
  bottom: 0;
  border-radius: 2px 2px 0 0;
}

#

原因 #

max-width: 100%不生效是flex布局的默认行为导致：flex元素的默认min-width值为auto，宽度会被内部设置了flex-shrink: 0的子元素撑开，不受父容器宽度限制，因此单纯设置max-width无法约束容器宽度。

修复方法 #

不需要关闭flex布局，仅需给.tabs容器补充两个属性即可：

• 添加width: 100%明确容器占满父级可用宽度
• 添加min-width: 0覆盖flex元素默认的最小宽度规则，允许容器宽度小于内部内容宽度
  额外可以给.tab项添加white-space: nowrap避免导航文字意外换行，也可以按需添加隐藏滚动条的样式优化移动端体验。
  修复后的完整CSS代码：

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 1.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* 新增宽度约束 */
  width: 100%;
  min-width: 0;
  /* 可选：隐藏横向滚动条，保留滚动能力 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* 可选：兼容webkit内核浏览器隐藏滚动条 */
.tabs::-webkit-scrollbar {
  display: none;
}

.tabs > * {
  flex-shrink: 0;
}

.tabs .tab {
  padding: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  white-space: nowrap; /* 避免文字换行 */
}

.tabs .tab.active {
  color: var(--color-heading);
}

.tabs .tab.active::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  position: absolute;
  bottom: 0;
  border-radius: 2px 2px 0 0;
}

修改后导航容器会严格遵循父容器宽度约束，内容溢出时自动触发横向滚动，和目标效果完全一致。

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