flexbox column wrap list without overlapping items

问题

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:

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

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>

回答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:

When flexbox items wrap in column mode, container does not grow its width
Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
Is it possible for flex items to align tightly to the items above them?
flex-wrap not working in nested flex container
Height of flex container not working properly in Safari
flexbox column wrap list without overlapping items

回答2:

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>

来源：https://stackoverflow.com/questions/61167544/flexbox-column-wrap-list-without-overlapping-items

标签

html

css

flexbox