儿童div不会填补div

Question

我在构建自定义表时遇到问题。我已经尝试摆弄Chrome检测工具并改变一切，但没有任何东西让我朝着目标前进。我已经搜索了所有的SO，但没有什么可以帮助我。我不能成为唯一面临这个问题的人，认真......

该表已在页面中实现，但我制作了一个简化版本来重现该问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

上面代码的结果如下：

非常感谢任何帮助。

编辑：给出了答案，但我需要说当div的宽度缩小时，这些项目应该相互靠近。

Answer 1

将background-color添加到包装器，并将悬停效果移动到行：

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

Answer 2

您的问题是您不能同时使用具有相同HTML元素的flexbox和表。但是，如果你只关注你所拥有的东西，你可以解决你的具体问题：需要缩小或扩展的并排div组，并且可能会溢出。

您可以在代码中看到混乱。你希望第三级孩子相对于第一级父级溢出和滚动，但是你试图为第二级孩子着色，而不是第三级孩子。

在这种情况下，您不处理行和列。行的长度只是容器中可用空间的长度（第一级父级）; “行”（第二级）不会拉伸以包含所有内容（第3级），因为它们是display: flex;。

正如您所看到的那样，行在顶部父元素内滚动子项，而不是子行在行内滚动。

要将背景颜色放在一行中的所有元素上，您实际上必须将它放在单个元素上。但是，你可以说只有特定类的孩子会有背景颜色，如下所示：

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

以下代码可以满足您的需求：

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

注意：你可以摆脱.scrollwrapper div并且它的工作方式相同。

Answer 3

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