I created two columns in common div with selector (.layout). Inside column I have tabs container with buttons what use flexbox and flex-wrap: nowrap; and overflow: auto;
If layout have display: flex; then all page have scroll and overflow: auto doesn’t work.
If I remove flex, everything works fine.
I made a demo version on jsfiddle. To add or remove flex, just click button toggler.
How to use overflow when I use flexbox or grid?
Is it possible to do without use position: absolute?
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
Answers
Set
overflow: hidden
on the parent element (you should probably create a wrapper for this, so you don’t apply this styling to your<main>
-element):Using
grid
, you can applygrid-auto-flow: column
so every item spans into a new column, and that should do the trick.Just add
.content {overflow: auto;}