使用Flexbox或Grid时如何设置Overflow？无需position:absolute可行吗？

当外层容器.layout设置display:flex时，内部.tabs容器的overflow:auto失效，整个页面出现横向滚动条；移除flex属性后，.tabs能正常显示横向滚动。

问题根源 #

Flex布局中，**flex子元素的默认min-width:auto**会让子元素（这里是.content）尽可能容纳其内部内容，不会主动收缩到容器的可用空间内。这就导致.tabs的超长内容直接撑开.content，进而撑大整个.layout，触发页面滚动，而非.tabs自身的滚动。

解决方法（无需position:absolute） #

给.content添加两个关键样式：

• flex: 1：让.content占据.layout的剩余可用空间
• min-width: 0：打破flex子元素的默认最小宽度限制，允许其收缩到容器空间内

修改后的CSS代码：

.layout {
  gap: 16px;
}

.aside {
  flex-shrink: 0;
  width: 200px;
  height: 300px;
  padding: 8px;
  border: 1px solid lightgreen;
}

.tabs {
  padding: 4px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  border: 1px solid pink;
  overflow: auto;
}

.tabs button { 
  white-space: nowrap;
}

.flex {
  display: flex;
}

/* 新增的关键样式 */
.content {
  flex: 1;
  min-width: 0;
}

原理说明 #

1. flex:1 等价于 flex-grow:1; flex-shrink:1; flex-basis:0%，让.content在.layout中抢占剩余空间，同时允许其收缩。
2. min-width:0 覆盖了flex子元素默认的min-width:auto，使得.content的宽度可以被限制在.layout的可用空间内，内部的.tabs就会因为父容器有明确的宽度限制，触发overflow:auto显示横向滚动条。

完整可运行代码 #

HTML

<div class="layout flex">
  <aside class="aside">
    aside part
  </aside>
  
  <main class="content">
    <div class="tabs">
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
      <button>long name tab</button>
    </div>
  </main>
</div>

<button class="toggler">
toggle flex
</button>

JavaScript

const layout = document.querySelector('.layout');
const toggler = document.querySelector('.toggler');

toggler.addEventListener('click', () => layout.classList.toggle('flex'));

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