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

Question

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

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

我知道显示 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

将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>

Answer 2

如果您稍微重新安排一下 CSS rules/properties 就可以了

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 中不需要的额外间距（可能更多）可以通过删除标记

中的行 breaks/space 来修复

<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>

Answer 3

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>

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

Extend background on scrolled flexbox container

html

css

overflow

scrollbar

flexbox