Flexbox 列换行列表，无重叠项目

Question

我有一个列表，我想将其包装在最大宽度为 540px 的弹出模式上显示。通常，它看起来像这样：但如果添加太多名字，那么它就会像这样重叠：我的目标是通过隐藏溢出（仅显示基于数据的最大可能列）或使其可滚动来防止名称重叠。当项目数量和名称长度未知时，如何包装列表以占用水平和垂直空间（如下所示）但防止项目重叠？这是我当前使用的 html 和 css 的片段：.modal {  width: 600px;}.wrapped-list {  margin-top: 12px;  max-height: 200px;  display: flex;  flex-direction: column;  flex-wrap: wrap;}<div class="modal"></div>

Answer 1

使用 Flexbox 因column wrap错误而臭名昭著（请参阅下面的部分列表）。

column wrap这种设置有很多问题，我建议尽可能远离。请row wrap改用 CSS Grid 或 CSS Grid。

在这种特殊情况下，列正确地包装了内容，但 Flex 算法没有考虑容纳列表项标记所需的宽度。

为了说明这一点，下面是带有边框的内容：

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

从第一列中可以清楚地看到，标记被排除在宽度计算之外，并且与以下列中的内容重叠。

如果您打算坚持使用column wrap，则可以尝试通过为所有项目添加左边距来补偿缺失的宽度，从第二列中的第一项开始。

像这样的东西：

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>

flexbox 的部分问题列表column wrap：

• 当 Flexbox 项目以列模式换行时，容器不会增加其宽度

• Flexbox：当flex-direction：column，flex-wrap：wrap时，宽度计算错误

• 弹性项目是否可以与其上方的项目紧密对齐？

• flex-wrap 在嵌套的 Flex 容器中不起作用

• Flex 容器的高度在 Safari 中无法正常工作

• Flexbox 列换行列表，无重叠项目

Answer 2

你可以这样做：

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