CSS in nested flexbox with overflow not applied

Question

I have a simple "table" built with flexbox.

I'd like to scroll a part of it using overflow-x.

As you can see from the sample code, the CSS style is only applied to the initially visible part of the flex item. In the overflown part, the CSS style is not applied. Scroll to the right and you'll see that the background stops where overflow begins.

.data-table {
  display: flex;
  width: 200px;
}

.data-table__scrollable-data {
  overflow-x: auto;
  background-color: white;
}

.data-table__row-group {
  display: flex;
  background-color: #33ccff;
}

.data-table__data-cell {
  flex: 1 0 100px;
  border-bottom: 1px solid black;
}

<div class="data-table">
        <div class="data-table__scrollable-data">
            <div class="data-table__row-group">
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
            </div>
        </div>
    </div>

possible duplicate: [Make background color extend into overflow area](https://stackoverflow.com/q/45497031/3597276) — Michael Benjamin, Mar 16 '18 at 16:20
It's not just background color. Also borders for example. But judging by the answers in the possible duplicate I might need to resort to using the background on the children (data-cell items). — Bojan Bedrač, Mar 16 '18 at 16:35
do you know the width of the cells? if you know the width, then you can just set the width of the parent and then the background should show up: https://jsfiddle.net/v1u936tm/ — Pete, Mar 16 '18 at 16:40
The width of the cells should be dynamic, so I won't know the width up front. This sounds like I'll need some Javascript to calculate the cell widths and set the total width on the row. Do you have a reference to why this behaves this way. Seems like it's like this "by design". — Bojan Bedrač, Mar 16 '18 at 20:56
@Pete if you make your comment an answer, I'll accept it. Seems to be the right way to handle this. — Bojan Bedrač, Mar 23 '18 at 15:17
Best to leave this open - there surely must be a better way! Seems a little hacky to have to set a width, it was just a quick workaround if no other option could be found (why I left it as a comment rather than an answer) — Pete, Mar 23 '18 at 15:19
I'm calculating the width for now, until there is a better way. Thanks @Pete. — Bojan Bedrač, Mar 26 '18 at 15:58

Cristophs0n · Answer 1 · 2018-03-18T12:06:42.880

To make the styles apply to the overflow area you can apply overflow-x: auto to the row. See the snippet:

.data-table {
  display: flex;
}

.data-table__row-group {
  display: flex;
  background-color: #33ccff;
  overflow-x: auto;
  width: 200px;
}

.data-table__data-cell {
  flex: 1 0 100px;
  border-bottom: 1px solid black;
}

<div class="data-table">
  <div class="data-table__scrollable-data">
    <div class="data-table__row-group">
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
    </div>
  </div>
</div>

Yes, I'd like to set the background on the whole row. You've set the background on each cell. That works as a workaround as I pointed out in the comment above. — Bojan Bedrač, Mar 16 '18 at 20:54
Sorry, but that's a different workaround and not acceptable for me. If this was a table with multiple row-groups each would have a scrollbar. — Bojan Bedrač, Mar 19 '18 at 08:16

CSS in nested flexbox with overflow not applied

1 Answers1