Child div doesn't fill div

I’m facing an issue while building a custom table. I already tried fiddling around with the Chrome Inspection Tool and changing everything, but nothing get me towards the goal. I already searched all around SO, but nothing could help me. I can’t be the only one that is facing this issue, seriously…

The table is already implemented into the page, but I made a simplified version to reproduce the issue.

.scrollwrapper {
  overflow: auto;
  border-radius: 2px;
}

.outtertable {
  transition: .2s;
  color: #333;
  background-color: rgba(0, 0, 0, 0.03);
  display: flex;
}

.theader {
  font-weight: 600;
}

.tbody:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.item {
  min-width: 50px;
  padding: 10px;
  width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
}
<div class="scrollwrapper">
  <div class="outtertable theader">
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
  </div>

  <div class="outtertable tbody">
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
  </div>
</div>

The result of the code above is this:

Any help is greatly appreciated.

EDIT: An answer was given, but I need to say that the items should get nearer each other when the div is shrinking in width.



.scrollwrapper {
  overflow: auto;
  border-radius: 2px;
}

.outtertable {
  transition: .2s;
  color: #333;
  background-color: rgba(0, 0, 0, 0.03);
  display: flex;
}

.theader {
  font-weight: 600;
}

.tbody:hover .item {
  background-color: rgba(0, 0, 0, 0.1);
}

.item {
  min-width: 50px;
  padding: 10px;
  width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
}
<div class="scrollwrapper">
  <div class="outtertable theader">
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
  </div>

  <div class="outtertable tbody">
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
  </div>
</div>

Add the background-color to the wrapper, and move the hover effect to the row:

.tbody:hover .item {
   background-color: rgba(0, 0, 0, 0.1);
}
.scrollwrapper {
  overflow: auto;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.03);
}

.outtertable {
  transition: .2s;
  color: #333;
  display: flex;
}

.theader {
  font-weight: 600;
}

.tbody:hover .item {
  background-color: rgba(0, 0, 0, 0.1);
}

.item {
  min-width: 50px;
  padding: 10px;
  width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
}
<div class="scrollwrapper">
  <div class="outtertable theader">
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
  </div>

  <div class="outtertable tbody">
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
    <div class='item'>Item</div>
  </div>
</div>

Your problem is that you can’t do both a flexbox and a table with the same HTML elements. But, you can solve your specific problem, if you just focus on what you have: groups of side-by-side divs that need to shrink or expand, and might overflow.

You can see the confusion in your code. You want the 3rd-level children to overflow and scroll relative to the 1st-level parent, but you’re trying to color the 2nd-level children, not the 3rd-level.

In this case, you’re not dealing with rows and columns. The length of your rows will only be the length of the available space in the container (1st-level parent); the “rows” (2nd-level) will not stretch to contain all of the content (3rd-level) because they are display: flex;.

As you can see, the row scrolls with the children inside the top parent element, rather then the children scrolling inside the row.

To put background color on all of the elements in a row, you actually have to put it on the elements (because, like I’ve shown above, the rows aren’t really rows). But, you can say that only children of a particular class will have the background color, like this:

.tbody:hover > .item {
  background-color: rgba(0,0,0,.1);
}

The following code does what you want:

Notice: you can get rid of the .scrollwrapper div and it works the same.