html - 向右滚动 Div 未知宽度

Question

我想在右边有一个滚动的 div，但我不知道该框的宽度需要是多少。

如果我将它设置为自动，它会在最大宽度 100% 处停止，当我提供 100% 时也无济于事。只要它需要在底部创建滚动条，我就希望内部 div 走。我发现它起作用的唯一方法是给它实际宽度，但我无法解释内部 div 的宽度是多少......

这是一个例子:https://jsfiddle.net/n0kzm82d/

在这个例子中，理论上我为每个内部元素输入了宽度，尽管我知道每个框的宽度是多少，但我不知道那里会有多少 div。

<div style="width: 100%;height: 250px;overflow-x: scroll;overflow-y: hidden;">
            <div style="width: 3000px;height: 250px;">
              <div style="width:300px;height:250px;float:left;background:red;">
              1
              </div>
              <div style="width:300px;height:250px;float:left;background:blue;">
              2
              </div>
              <div style="width:300px;height:250px;float:left;background:red;">
              3
              </div>
              <div style="width:300px;height:250px;float:left;background:blue;">
              4
              </div>
              <div style="width:300px;height:250px;float:left;background:red;">
              5
              </div>
              <div style="width:300px;height:250px;float:left;background:blue;">
              6
              </div>
            </div>
            </div>

Answer 1

如果我没看错，你可以在父元素上使用 white-space: nowrap 并在子元素上使用 display: inline-block

.wrap {
  overflow-x: auto;
  white-space: nowrap;
}

.wrap > div {
  background-color: red;
  display: inline-block;
  height: 250px;
  width: 300px;
  white-space: initial;
  color: white;
}

.wrap > div:nth-child(even) {
  background-color: blue;
}

<div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>