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

【问题标题】：How to stretch width to 100% of scrollable area?如何将宽度拉伸到可滚动区域的 100%？
【发布时间】：2018-09-02 06:40:51
【问题描述】：

我想将红色 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

【问题讨论】：

你可以添加另一个包装器吗？
你的意思是display: inline-block;？不确定是否必须仔细检查...如果没有，那就太好了
是的，你制作了外部的内联块，然后是另一个你应用溢出的包装器

标签： html css

【解决方案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>

【讨论】：

但是为什么呢？我希望能对正在发生的事情进行合乎逻辑的解释。我觉得有时 CSSer 只是把事情弄得一团糟，直到它们到位，但我想正确理解发生了什么。（任何关于高级/高级 CSS 信息的建议也很棒！）
@CodeAt30 为什么？ :) 这里没有高级 CSS，我只是将溢出移动到另一个包装器以允许 width:100% 工作......我看不出我可以添加什么解释。我应该解释什么是内联块元素吗？或者 width:100% 是如何工作的？ ...同样对于第二种情况，这很简单，我声明了一个变量并使用它，还有什么不清楚的地方？
谢谢。第二个版本不起作用，因为我事先不知道宽度。第一个做到了。在我的具体情况下，我只需将 min-width: 100% 添加到 .outer 即可在容器比其内容宽时拉伸。
@Daniel 我也忘记删除宽度：100%，在这种情况下没用;) .. 代码更新
@TemaniAfif 这不是对您的回答的批评。太好了，我也投了赞成票。但例如，我不明白为什么元素的宽度不能 - 当使用动态单元（如 em, %, vw 等）时，忽略溢出。我可以假设 CSS 处理溢出等的方式存在结构性原因。但就像我总是最终得到快速修复的方法，而不是深入的 CSS 和它如何在引擎盖下工作的解释.每当我查找高级 CSS 或类似的东西时，我最终都会得到有关如何使用 css-transitions 等的信息，老实说这根本不高级

【解决方案2】：

只需给它们的父元素display: grid，然后将.red 扩展为width，这是由.blue 的width 决定的。只要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>

【讨论】：