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

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>

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

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

感谢您的任何帮助。

干杯马可

标签： htmlcsssassoverflow

Answer 1

从width:100%（如果您希望元素的宽度至少为 100%，如果项目较少，请替换为），并使用ul它代替.min-widthinline-flexflex

对于div.slider-pane, set display: inline-block，如果你想让黄色也增长。（如果需要，再次添加最小宽度。）

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