How to use overflow when I use flexbox or grid?

Question

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>

min-width: 0 to .content – Temani Afif Jun 19 '23 at 21:52 — Temani Afif, Jun 19 '23 at 21:52

score 1 · Answer 1 · answered Jun 19 '23 at 17:30

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>

Thank you:) It really works good. In my project I also have display greed for all the layout. and overflow for every container works good :) — Shrood, Jun 19 '23 at 17:57

score 1 · Accepted Answer · answered Jun 19 '23 at 17:37

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>

Thankk you. It really works :) – Shrood Jun 19 '23 at 17:56 — Shrood, Jun 19 '23 at 17:56

How to use overflow when I use flexbox or grid?

2 Answers2