skip to Main Content

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


  1. 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):

    .content {
      overflow: hidden;
    }
    

    Using grid, you can apply grid-auto-flow: column so every item spans into a new column, and that should do the trick.

    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: hidden;
    }
    
    .tabs {
      padding: 4px;
      display: grid;
      grid-auto-flow: column;
      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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search