具有全宽项目的水平滚动弹性列表答案

【问题标题】：Horizontal scrolling flex list with full width items具有全宽项目的水平滚动弹性列表
【发布时间】：2021-05-07 10:50:25
【问题描述】：

我尝试编写一个水平滚动列表，其中每个元素都有完整的宽度。

在以下示例中，蓝色区域的大小应与灰色框区域的大小相同。

.scroller {
  max-width: 600px;
  border: 1px solid grey;
  margin: auto;
  overflow-x: auto;
  overflow-y: visible;
}

.item {
  display: flex;
  background-color: red;
  margin-bottom: 5px;
  height: 74px;
}

.block {
  flex: 0 0 64px;
  background-color: lightgrey;
  margin: 5px;
}

.blue {
  flex: 1;
  background-color: blue;
  margin: 5px;
}

<div class="scroller">
    <div class="item">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="item">
      <div class="blue"></div>
    </div>
</div>

但如果我向右滚动，蓝色元素会停在父元素的 100% 宽度处。奇怪的是，所有项目的红色背景颜色也停止在 100%。

我尝试了几乎所有宽度、最小宽度、fit-content、inline-flex 等的组合。

有没有办法解决这个问题？

编辑：在生产中会有两个以上的项目，并且所有项目都必须一起滚动。

【问题讨论】：

标签： html css scroll flexbox

【解决方案1】：

添加一个您制作的额外包装器 inline-block 并为弹性项目使用宽度

.scroller {
  max-width: 600px;
  border: 1px solid grey;
  margin: auto;
  overflow-x: auto;
  overflow-y: visible;
}

.scroller>div {
  display: inline-block;
  min-width: 100%;
}

.item {
  display: flex;
  background-color: red;
  margin-bottom: 5px;
  height: 74px;
}

.block {
  flex: 0 0 64px;
  width:64px;
  background-color: lightgrey;
  margin: 5px;
}

.blue {
  flex: 1;
  background-color: blue;
  margin: 5px;
}

<div class="scroller">
  <div>
    <div class="item">
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
    <div class="item">
      <div class="blue"></div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

放置溢出：自动或滚动到溢出子项的父项

.scroller {
  max-width: 600px;
  border: 1px solid grey;
  margin: auto;
  overflow-x: auto;
  overflow-y: visible;
}

.item {
  display: flex;
  background-color: red;
  margin-bottom: 5px;
  height: 74px;
  width: 100%;
  overflow: auto
}

.block {
  flex: 0 0 64px;
  background-color: lightgrey;
  margin: 5px;
}

.blue {
  flex: 1;
  background-color: blue;
  margin: 5px;
}

<div class="scroller">
    <div class="item">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="item">
      <div class="blue"></div>
    </div>
</div>

【讨论】：

这不是我想要的功能。所有项目都必须一起滚动，因为可能不止两个项目，而且我不希望每个项目都有一个滚动条

【解决方案3】：

有你需要的吗？

.scroller {
 width: max-content;
  border: 1px solid grey;
  margin: auto;
  overflow-x: auto;
  overflow-y: visible;
}

.item {
  display: flex;
  background-color: red;
  margin-bottom: 5px;
  height: 74px;
}

.block {
  min-width: 64px;
  flex: 1;
  background-color: lightgrey;
  margin: 5px;
}

.blue {
  flex: 1;
  background-color: blue;
  margin: 5px;
}

<div class="scroller">
    <div class="item">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="item">
      <div class="blue"></div>
    </div>
</div>

【讨论】：