1

I have a list that I'd like to wrap to show on a pop-up modal which has a maximum width of 540px.

Typically, it looks like this:

Normal List

But if too many names are added, then it'll overlap like this:

Overlapping List

My goal is to prevent the names from overlapping either by hiding the overflow (only show the maximum possible columns based on the data), or by making it scrollable.

How can I wrap the list to take up the horizontal and vertical space (as showed below) but prevent the items from overlapping when the number of items and length of the names is not known?

Here's a snippet with the html and css that I'm currently using:

.modal {
  width: 600px;
}

.wrapped-list {
  margin-top: 12px;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
<div class="modal">
<ol class="wrapped-list"><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li></ol>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Seth Killian
  • 908
  • 9
  • 20

2 Answers2

1

Using flexbox with column wrap is notorious for bugs (see a partial list below).

There are so many problems with this set up, that I would recommend staying away from column wrap whenever possible. Use row wrap or CSS Grid instead.

In this particular case, the columns are wrapping the content properly, but the flex algorithm is not factoring in the width needed to accommodate the list item markers.

To illustrate, here's the content with a surrounding border:

.modal {
  width: 600px;
}

.wrapped-list {
  margin-top: 12px;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

li {
  border: 1px solid red;
}
<div class="modal">
<ol class="wrapped-list"><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li></ol>
</div>

As you can see clearly from the first column, the markers are excluded from the width calculation, and overlap content in the following columns.

If you're going to stick with column wrap, you can try compensating for the missing width by adding a left margin to all items, starting with the first item in the second column.

Something like this:

li:nth-child(n + 11) {
  margin-left: 45px;
}


.modal {
  width: 600px;
}

.wrapped-list {
  margin-top: 12px;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
}

li:nth-child(n + 11) {
  margin-left: 45px;
}
<div class="modal">
<ol class="wrapped-list"><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li></ol>
</div>

Partial list of problems with flexbox column wrap:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    The margin definitely was the solution - at least as good of a solution that one could expect. Starting on the second column was also a really nice touch. – Seth Killian Apr 12 '20 at 19:41
0

You can do something like this:

.modal {
  width: 600px;   
  max-height: 200px;
}

.wrapped-list {
    width: 600px;
 margin-top: 12px;
 max-height: 200px;
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
   overflow-x:auto;
 }
 
.wrapped-list li{
   padding-right:50px; 
 }
<div class="modal">
  <ol class="wrapped-list">
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
  </ol>
</div>
Manjuboyz
  • 6,978
  • 3
  • 21
  • 43