html - 如何将宽度拉伸(stretch)到可滚动区域的 100%？

Question

我想将红色 div 拉伸(stretch)到可滚动区域的 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>