在滚动的 flexbox 容器上扩展背景答案

【问题标题】：Extend background on scrolled flexbox container在滚动的 flexbox 容器上扩展背景
【发布时间】：2017-06-14 01:54:20
【问题描述】：

如何使用 flexbox 和宽度有限的容器将背景向右扩展？

跨度是必须包含背景颜色的标签，而不是父标签。（因为每个跨度的颜色可能不同）

我知道显示 table 和 table-row 修复了它，但它给我带来了填充和边框的另一个问题，所以我想使用 flexbox 模型。

还有一个要求，背景应该延伸到最宽的跨度，所以所有的跨度应该具有相同的宽度并将背景延伸到相同的位置。

pre {
  width: 300px;
}

code {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

span {
  background-color: #ddd;
}

<pre>
  <code>
    <span>sadfasdsad asd adsads  das ads dasdasdas  dasd as das</span>
    <span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads  das ads dasdas</span>
  </code>
</pre>

【问题讨论】：

由于这在列布局中无法正确完成，column-mode-container-does-not-grow-its-width，您对display: table/display: table-row 有什么问题？
好吧，想出了一种可能的方法，将其发布为答案

标签： html css flexbox scrollbar overflow

【解决方案1】：

align-items:flex-start会帮你

code {
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  width: 300px;
  overflow: auto;
}

span {
  background-color: #ddd;
}

<pre>
  <code>
    <span>sadfasdsad asd adsads  das ads dasdasdas  dasd as das</span>
    <span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads  das ads dasdas</span>
  </code>
</pre>

【讨论】：

align-items:flex-start 会帮助你

【解决方案2】：

如果你稍微重新排列你的 CSS 规则/属性，它就会起作用

pre {
  width: 300px;
  display: flex;
  overflow: auto;
}
code {
  display: flex;
  flex-direction: column;
}
span {
  background-color: #ddd;
}
span ~ span {
  background-color: #aaa;
}

<pre>
  <code>
      <span>sadfasdsad asd adsads  das ads dasdasdas  dasd as das</span>
      <span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads  das ads dasdas</span>
  </code>
</pre>

更新

可以通过删除标记中的换行符/空格来修复 IE11/Edge 中出现的不需要的额外间距（可能还有更多）

<pre>
  <code><span>sadfasdsad asd adsads  das ads dasdasdas  dasd as das</span><span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads  das ads dasdas</span></code>
</pre>

另一种选择是将pre/code 更改为div（在 Chrome、Firefox、Edge、IE11 上测试成功）

div.pre {
  width: 300px;
  display: flex;
  overflow: auto;
}
div.code {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
span {
  background-color: #ddd;
}
span ~ span {
  background-color: #aaa;
}

<div class="pre">
  <div class="code">
      <span>sadfasdsad asd adsads  das ads dasdasdas  dasd as das</span>
      <span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads  das ads dasdas</span>
  </div>
</div>

【讨论】：

@FélixSanz 等待对此的答案....并告诉我您在display: table 遇到的问题，我也为此制定了解决方案，如果 flexbox 问题可以'不固定
@FélixSanz 这是我 IE11 的屏幕截图：i.stack.imgur.com/Z20Sa.png
@FélixSanz 不，仍在等待答案和修复建议，并且由于 IE11 在 flexbox 方面存在许多错误，这可能无法解决......同时，你能告诉我吗知道display: table 的问题，我在 IE11/10/9 上解决了很多问题
如果您删除 code 标签内的空格（</span> 和 <span> 之间没有空格），它会得到修复。你能确认吗？示例 -> jsfiddle.net/1o25fLyv
@FélixSanz 是的，这消除了 IE11/Edge 中不需要的间距 .... 与我更新的答案的 2:nd 示例一样 :)

【解决方案3】：

将margin:auto添加到span

pre {
  width: 300px;
}

code {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

span {
  background-color: #ddd;
  margin: auto;
}

<pre>
  <code>
    <span>sadfasdsad asd adsads  das ads dasdasdas  dasd as das</span>
    <span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads  das ads dasdas</span>
  </code>
</pre>

【讨论】：

但这并不能使它们具有相同的宽度