主页 / 问题 / 1562454
Accepted
Швеев Алексей
Asked:2024-01-20 21:12:22 +0000 UTC2024-01-20 21:12:22 +0000 UTC

展开时，可滚动元素会展开整个页面，而不是其本身

  • 772

我有 3 个元素，其中 2 个外部元素应占据尽可能多的空间，而中央元素则应拉伸并占据所有剩余空间。它包含另一个元素列表，如果这些元素超出边界，那么它们应该滚动，但它们只是超出整个页面的边界，为其添加水平滚动（在本例中，它们被压缩）。

同时，外部元素的大小无法轻易确定，因此手动计算它们的大小不是一个选择，这就是为什么max-width: calc(...)不再需要（尽管通过js可能可以）

.list {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  margin-bottom: 3em;
}

.const {

}

.stretch {
  align-self: stretch;
  flex-grow: 1;
  overflow-x: scroll;
  background-color: rgb(230, 230, 230);
}

.el {
  width: 2em;
  height: 2em;
  background-color: rgb(100, 100, 100);
}

.stretch .el {
  background-color: rgb(100, 100, 200);
}
<div class='list'>
  <div class='const'>
    <div class='el'></div>
  </div>
  
  <div class='stretch list'>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
  </div>
  
  <div class='const'>
    <div class='el'></div>
  </div>
</div>

<div class='list'>
  <div class='const'>
    <div class='el'></div>
  </div>
  
  <div class='stretch list'>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
  </div>
  
  <div class='const'>
    <div class='el'></div>
  </div>
</div>

UPD：我尝试为stretch元素添加包装器，并将元素本身的宽度设置stretch为 100%。但是当元素扩展时，它仍然会以某种方式扩展包装器，尽管它的宽度等于包装器的宽度，不多也不少......

html

1 个回答

  1. Best Answer

    您的代码充满了错误，并且根本无法按照您的描述工作......

    1. 您不需要不断添加滚动条，您不知道该数据表中将有多少元素，也不知道他们将在哪个设备的对角线上查看它。因此 .stretch {overflow-x: auto; width: calc(100% - W1 - w2)} * 如果由于某种原因你不知道w2的宽度...并且设计上它不能被CSS限制，那么你可以通过网格系统和相对来解决它价值观。尽管然后忘记偶数列。
    2. 如果您不希望此列表中的元素被挤压，请为它们提供最小保证宽度 .el { min-width: 100px; 宽度：自动；} *如果了解什么样的元素、图像、产品卡列表，就可以更准确地选择。

    body {
  margin: 0;
}

.list {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  margin-bottom: 3em;
}

.stretch {
  flex-grow: 1;
  overflow-x: auto;
  background-color: rgb(230, 230, 230);
}

.el {
  width: auto;
  min-width: 2em;
  height: 2em;
  background-color: rgb(100, 100, 100);
}

.stretch .el {
  background-color: rgb(100, 100, 200);
}
    <div class='list'>
  <div class='const'>
    <div class='el'></div>
  </div>

  <div class='stretch list'>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
  </div>

  <div class='const'>
    <div class='el'></div>
  </div>
</div>

<div class='list'>
  <div class='const'>
    <div class='el'></div>
  </div>

  <div class='stretch list'>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
  </div>

  <div class='const'>
    <div class='el'></div>
  </div>
</div>

    • 1

相关问题