Question 189821 in Html Question posted in
Some basic documentation can be found here.

Html – How to use overflow when I use flexbox or grid?

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>
Tags:

2

Answers


  1. 0

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

    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