CODEWITHSUNDEEP
htmlcss
Fusseldieb
Fusseldieb

Reputation: 1374

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: Screenshot_78.png

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.

Upvotes: 1

Views: 100

Answers (3)

Joseph Hansen
Joseph Hansen

Reputation: 13339

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

enter image description here

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 individual elements. 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:

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

.outtertable>.item {
  background-color: rgba(0, 0, 0, 0.03);
}

.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="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>

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

Upvotes: 1

user8317956
user8317956

Reputation: 

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

Upvotes: 0

sol
sol

Reputation: 22959

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>

Upvotes: 1

Related Questions