此问题已在此处有答案：
Why don't flex items shrink past content size?（5个答案）
5天前关闭。
我用selector（.layout）在common div中创建了两列。在列内我有标签容器与按钮使用flexbox和flex-wrap：nowrap;和overflow：自动;
如果布局有显示：flex;然后所有页面都有滚动和溢出：汽车不工作。如果我去掉Flex，一切都正常。
我在jsfiddle上做了一个演示版本。要添加或删除Flex，只需单击按钮切换器。
当我使用flexbox或grid时，如何使用溢出？是否可以不使用位置：绝对？
const layout = document.querySelector('.layout');
const toggler = document.querySelector('.toggler');
toggler.addEventListener('click', () => layout.classList.toggle('flex'));.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;
}<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>
2条答案
按热度按时间z2acfund1#
只需添加
.content {overflow: auto;}i7uq4tfw2#
在父元素上设置
overflow: hidden（你可能应该为此创建一个 Package 器，这样你就不会将这个样式应用到你的<main>-element上）：使用
grid，可以应用grid-auto-flow: column，这样每个项都可以跨到一个新的列中，这应该可以做到。