0

enter image description here

I made a menu whose container using flexbox, I want this menu to only have 2 columns, and if there are many menus it can only scroll vertically not horizontally. But I want each menu to have a close distance. I've made the code and css like the snippet below, but when there is a menu that has many children, the menu next to it has too much gap. how to solve this?

.menu-dropdown{
  height: 200px;
  overflow:auto;
}
.wrapper-container{
  min-width: 560px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 300px;
}

.menu-item{
  max-width: 50%;
  width: fit-content;
  display: flex;
}
<div class="menu-dropdown">
  <div class="wrapper-container">
  <div class="menu-item">
    <ol>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
    </ol>
  </div>
  <div class="menu-item">
    <ol>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
    </ol>
  </div>
  <div class="menu-item">
    <ol>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
    </ol>
  </div>
  <div class="menu-item">
    <ol>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
    </ol>
  </div>
  <div class="menu-item">
    <ol>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
    </ol>
  </div>
  <div class="menu-item">
    <ol>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
    </ol>
  </div>
  <div class="menu-item">
    <ol>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
    </ol>
  </div>
</div>
</div>
fikfe
  • 172
  • 7

1 Answers1

1

No, row-flex ain't gonna work here. If you want a vertical scroll, column-flex will work neither. The behaviour you are trying to achieve is created via columns:

.wrapper-container{
  columns: 2;
}
.menu-item{
  break-inside: avoid-column;
}

Here's an example codepen

Jared
  • 1,294
  • 2
  • 8
  • 13