How to use overflow when I use flexbox or grid?

June 19, 2023

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>

>Solution :

Just add .content {overflow: auto;}

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;
}

.content {
  overflow: auto;
}

.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>