溢出自动容器内的元素没有正确的宽度（所有组合的子元素）

Question

我有一个固定宽度的包装器 <div> 和一个内部 <div>，其中包含一个列表，其中包含多个项目，这些项目加起来比父级 <div> 宽。

一旦内容变得比包装器更宽 <div>，我想要一个垂直滚动条。

这很好用，但不幸的是，内部 <div> 的宽度与我的包装器 div 的宽度相同。列表项溢出内部 <div>，但是当我为内部 <div> 设置背景颜色时，它仅在包装 <div>.

的宽度下可见

我希望内部 <div> 与其子元素具有相同的宽度。

有人知道如何解决这个问题吗？

这是一个示例代码：

.slider-wrapper {
  width: 500px;
  background: grey;
  overflow: auto;
}

.slider-pane {
  background: yellow;
  padding: 20px 0;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  width: 100%;
  background: red;
}
  
li {
  width: 100px;
  height: auto;
  padding: 20px 0;
  flex-shrink: 0;
}

<div class="slider-wrapper">
  <div class="slider-pane">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
    </ul>
  </div>
</div>

Link 到易于编辑的 jsfiddle： https://jsfiddle.net/gcx9zws2/

如您在示例中所见，红色和黄色背景在包装元素的宽度处结束。但我需要它与所有列表项的宽度相同。不知道后面list里会有多少元素，所以首选纯CSS方案

感谢您的帮助。

干杯马可

Answer 1

从 ul 中删除 width:100%（如果您希望该元素至少 100% 宽，如果项目较少，请替换为 min-width），并使其成为 inline-flex 而不是 flex.

并且对于 div.slider-pane，设置 display: inline-block，如果您希望黄色也增长。（再一次，如有必要，添加一个 min-width。）

.slider-wrapper {
  width: 500px;
  background: grey;
  overflow: auto;
}

.slider-pane {
  display: inline-block;
  background: yellow;
  padding: 20px 0;
}

ul {
  margin: 0;
  padding: 0;
  display: inline-flex;
  list-style: none;
  min-width: 100%;
  background: red;
}
  
li {
  width: 100px;
  height: auto;
  padding: 20px 0;
  flex-shrink: 0;
}

<div class="slider-wrapper">
  <div class="slider-pane">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
    </ul>
  </div>
</div>

Answer 2

我打算建议将 overflow: auto 添加到 内部 div (.slider-pane) 而不是 .slider-wrapper。这将使 外部 div 保持正确的尺寸，但 内部 div 将溢出滑块正确。

如果喜欢请看这支笔：https://codepen.io/JackofD/pen/LoGNjP

溢出自动容器内的元素没有正确的宽度（所有组合的子元素）

Element inside overflow auto container dosent have correct width (of all combined childs)

html

css

sass

overflow