html - 无法显示溢出的背景

Question

我有两个 float 的无序列表，超出了它的 flex 容器宽度。背景以某种方式停止在容器的宽度处。有人可以帮我拉伸(stretch)那个背景吗？

.container          { background: #eee; display: flex; flex-direction: column; margin: 0 auto; overflow: auto; width: 700px; }
.large              { background: lightgreen; display: flex; list-style: none; padding: 0; }
.large li           { display: inline-block; margin: 0 10px 0 0; white-space: nowrap; }

---

<div class="container">
    <ul class="large">
        <li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li>
    </ul>
    <ul class="large">
        <li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li><li>item</li>
    </ul>
</div>

https://jsfiddle.net/zgorr0tr/

Answer 1

CSS 上的小改动。

.container			{
  background: #eee;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: auto;
  width: 700px;
}
.large {
  display: flex;
  list-style: none;
  padding: 0;
}
.large li {
  background: lightgreen;
  display: inline-block;
  padding: 0 10px 0 0;
  white-space: nowrap;
}

<div class="container">
		<ul class="large">
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
		</ul>
		<ul class="large">
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
		</ul>
	</div>