css设置列表元素竖向排列2行横向宽度不定，横向超出则显示滚动条

要实现CSS中列表元素的竖向排列，并且每行显示不定宽度的元素，同时在横向超出容器宽度时显示滚动条，可以使用以下方法：

1. 使用`display: flex`属性来创建一个弹性容器。
2. 设置`flex-wrap: wrap`属性，这样子元素可以在必要时换行。
3. 为整个容器设置一个固定的宽度或宽度为百分比，以适应布局需求。
4. 为了使竖向排列的列表项在一行填满整个容器宽度后显示滚动条，可以在容器上添加`overflow-x: scroll`属性。

以下是一个简单的HTML和CSS示例代码：

HTML:

<div class="flex-container">
  <div class="flex-item">列表项 1</div>
  <div class="flex-item">列表项 2</div>
  <div class="flex-item">列表项 3</div>
  <!-- 更多列表项 -->
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 80%; /* 或者固定宽度 */
  height: 150px; /* 可以根据需要设置高度 */
  overflow-x: scroll; /* 横向超出时显示滚动条 */
}

.flex-item {
  flex: 0 0 auto; /* 不允许元素放大或缩小，保持原始大小 */
  margin: 5px; /* 列表项间的间隔 */
  /* 可以根据需要设置flex-item的其他样式，比如背景色、字体大小等 */
}

这样设置后，所有的`.flex-item`将按照从左到右的顺序排列，当一行无法容纳更多元素时，它们会自动换行。由于设置了`overflow-x: scroll`，当整个容器的宽度超出父容器的宽度时，就会显示横向滚动条。