How to implement horizontal scroll for the block which is display flex and contains other blocks which are display flex too?

user_7551481 0
Viewed 36

There is a panel which have display: flex

.panel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  column-gap: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  background-color: red;
}

Other elements may appear in it, which are also display: flex; (now it's 1 and 2) enter image description here

.filter {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  background-color: #ccc;
  outline: 1px solid green;

  button {
    flex-shrink: 0;

      &:not(:last-of-type) {
        margin-right: 0.5rem;
      }
  }
}

When overflowing, scrolling should appear. It appears, but the elements overlap each other. enter image description here

If you add flex-shrink to them: 0; then the overlay disappears, but the horizontal scrolling disappears.

.filter {
  flex-shrink: 0; // +
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  background-color: #ccc;
  outline: 1px solid green;
      
}

enter image description here

How fix this issue?

flexbox sass css html
1 Answers

You need to add an extra wrapper above the parent element and move the overflow properties with the wrapper. Also, to prevent folding the .panel should have an absolute width while you have relative.

.wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

.panel {
  min-width: max-content;
  display: flex;
  justify-content: flex-end;
  column-gap: 2rem;
  background-color: red;
}

.filter {
  display: flex;
  gap: 0.275rem;
  padding-left: 0.5rem;
  align-items: center;
  background-color: #ccc;
  outline: 1px solid green;
}

button {
  padding: 0.5rem 2.5rem 0.5rem 1rem;
}
<div class="wrapper">
  <section class="panel">
    <div class="filter">
      Age
      <button>35-39</button>
      <button>40-44</button>
      <button>45-49</button>
      <button>50-54</button>
    </div>
    <div class="filter">
      Status
      <button>Active</button>
      <button>Past Due</button>
      <button>Trial</button>
      <button>Default</button>
    </div>
  </section>
</div>

user_155451160
Related