如何将宽度拉伸到可滚动区域的100％？

Question

我想将红色div扩展到可滚动区域的100％，即，使其具有蓝色的宽度，但不对红色的宽度进行硬编码。

.outer {
  overflow: auto;
}

.blue {
  width: 200em;
  background: blue;
}

.red {
  width: 100%;/*does not work */
  background: red;
}

<div class="outer">
  <div class="blue">
    Test
  </div>
  <div class="red">
    Test
  </div>
</div>

https://codepen.io/anon/pen/bxqEMy

Answer 1

如果可以更改HTML，请添加另一个包装，如下所示：

.container {
  overflow: auto;
}

.outer {
  display: inline-block;
}

.blue {
  width: 200em;
  background: blue;
}

.red {
  background: red;
}

<div class="container">
  <div class="outer">
    <div class="blue">
      Test
    </div>
    <div class="red">
      Test
    </div>
  </div>
</div>

或者您可以使用CSS变量将蓝色元素的宽度声明移动到父元素，以便可以在红色元素中使用它：

.outer {
  overflow: auto;
  --w:200em;
}

.blue {
  width:var(--w);
  background: blue;
}

.red {
  width: var(--w);
  background: red;
}

<div class="outer">
  <div class="blue">
    Test
  </div>
  <div class="red">
    Test
  </div>
</div>

Answer 2

只需给出其父元素 display: grid，然后将.red扩展到其width，由width决定.blue中的一个。只要overflow: auto是“正在使用” 。

.outer {
  display: grid;
  overflow: auto;
}

.blue {
  width: 200em;
  background: blue;
}

.red {
  background: red;
}

<div class="outer">
  <div class="blue">
    Test
  </div>
  <div class="red">
    Test
  </div>
</div>

此外，您还可以使用 Flexbox （在Firefox中运行）进行操作：

.outer {
  display: flex;
  flex-flow: column wrap;
  overflow: auto;
}

.blue {
  width: 200em;
  background: blue;
}

.red {
  background: red;
}

<div class="outer">
  <div class="blue">
    Test
  </div>
  <div class="red">
    Test
  </div>
</div>

对于Chrome浏览器，借助附加包装器（在Firefox中也适用）：

.wrapper {
  overflow: auto;
}

.outer {
  display: inline-flex;
  flex-flow: column wrap;
}

.blue {
  width: 200em;
  background: blue;
}

.red {
  background: red;
}

<div class="wrapper">
  <div class="outer">
    <div class="blue">
      Test
    </div>
    <div class="red">
      Test
    </div>
  </div>
</div>