html - 在滚动的 flexbox 容器上扩展背景

Question

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

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

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

还有一个要求，背景要延伸到最宽的span，所以所有span的宽度要相同，背景延伸到相同的位置。

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>

Answer 1

如果你稍微重新安排你的 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>