Extend background on scrolled flexbox container

Question

How can I extend the background to the right using flexbox and a container with limited width?

The spans are the tags that must contain a background-color, not the parent tags. (Because the color can be different for each span)

I know that display table and table-row fixes it, but it gives me another problems with paddings and borders, so I would like to use flexbox model.

There is another requeriment, the background should extend to the widest span, so all spans should have the same width and extend the background to the same position.

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>

Since this can't be done properly in a column layout, [column-mode-container-does-not-grow-its-width](http://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width), what issues do you have with `display: table`/`display: table-row`? — Asons, Jan 29 '17 at 14:54
Well, figured a way that might be an option, posted it as an answer — Asons, Jan 29 '17 at 16:13

Asons · Accepted Answer · 2017-01-30T08:51:14.817

1

If you rearrange your CSS rules/properties a little it will work

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>

Updated

The unwanted extra spacing that occurs in IE11/Edge (and maybe a few more) can be fixed by removing the line breaks/space in the markup

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

Another option is to change the pre/code to div's (tested with success on 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>

edited Jan 30 '17 at 08:51

answered Jan 29 '17 at 14:16

Asons

84,923
12
110
165

@FélixSanz Waiting for an answer on that .... and let me know the issue you had with `display: table` and I work out a solution for that too, could be good if the flexbox issue can't be fixed – Asons Jan 29 '17 at 18:45
@FélixSanz Here is a screenshot from my IE11: https://i.stack.imgur.com/Z20Sa.png – Asons Jan 29 '17 at 23:01
@FélixSanz No, still waiting for an answer, and a fix suggestion, and since IE11 has many bugs when it comes to `flexbox` this might not be solveable ... meanwhile, can you let me know the issue you have with `display: table`, I have solved many things with that on IE11/10/9 – Asons Jan 30 '17 at 06:59
If you remove whitespace inside `code` tag (no spaces between `` and ``) it gets fixed. Can you confirm it? Example -> https://jsfiddle.net/1o25fLyv/ – Félix Sanz Jan 30 '17 at 08:34
@FélixSanz Yes, that take away the unwanted spacing in IE11/Edge .... as with my updated answer's 2:nd sample :) – Asons Jan 30 '17 at 08:37
@FélixSanz Updated ... thanks ... and I will delete comments as they no longer is needed ... agree? – Asons Jan 30 '17 at 08:44

score 0 · Answer 2 · answered Jan 28 '17 at 13:14

0

Add margin:auto tospan

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>

answered Jan 28 '17 at 13:14

Ram Segev

2,563
2
12
24

But that doesn't make them have the same width – Félix Sanz Jan 28 '17 at 20:13

score 0 · Answer 3 · edited Aug 21 '19 at 11:20

0

align-items:flex-start will help you

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>

edited Aug 21 '19 at 11:20

Regolith

2,944
9
33
50

answered Aug 21 '19 at 09:44

Tarun Sharma

1

align-items:flex-start will help you – Tarun Sharma Aug 21 '19 at 09:47

Extend background on scrolled flexbox container

3 Answers3