将元素宽度设置为 100% 可滚动宽度

Question

我遇到了一个 CSS 布局问题，我无法将元素属性设置为 最大可滚动 宽度。在我的情况下，我有一个相对大小的 div（在实际代码中，它应该是响应式的）在里面显示文本。目的是为一些行设置背景颜色以强调差异。

#wrapper {
  width: 25%;
  overflow-x: scroll;
}
span {
  white-space: pre;
  /* required */
  font-family: monospace;
  /* required */
  display: block;
  /* required to make width effective */
  width: 100%;
}
.green {
  background-color: #7f7;
}

<div id="wrapper">
  <span class="green">   That's an add ! Scroll me...
    </span>
  <span>Lorem ipsum dolor sit amet blablablablablablabl
    </span>
</div>

Here is a JSFiddle我做了说明。

我无法将背景颜色设置到块的末尾，这意味着如果有人滚动，他将看不到颜色。

Stackoverflow 上有几个类似的问题，许多人建议使用min-width 值（即background css 100% width horizontal scroll issue）。如果内容没有达到min-width 的值，那就不好了。

如果有适当的方法来解决这个问题，我会很高兴听到它！

Answer 1

使用vw (100% viewport width) 将容器拉伸到视口的末端。您还需要将display 更改为table-header-group:

span {
  white-space: pre;  /* required */
  font-family: monospace;  /* required */
  display: table-header-group;  /* required to make width effective */
  width: 100vw; /*100% of viewport width*/
}

vh（视口高度）也可以用于需要将容器拉伸到视口高度的 100% 的情况。

希望对你有帮助。