Html 如何将div的宽度设置为祖辈div

我有一张基于flexbox的桌子。容器的“弹性方向”设置为“行”，每列设置一个弹性项。现在我需要一种方法来突出显示一行中的所有项目。因为每一行都分散在多个flex项（列）上，所以我尝试创建一个div来突出显示该行。div在第一列创建，样式如下

  position: absolute;
  z-index: 65365;
  width: 400px;
  top: -1px;
  height: 27px;
  left: -1px;
  border: 1px;
  border-color: #111;
  border-style: solid;
  border-radius: 4px;
}

由于表可以动态调整大小，我需要设置相对于祖辈div fr flex表的大小突出显示行的div的大小

为了更清楚，我创建了一个codepen.io示例。我无法将其整合到这个问题中，因此与示例存在外部链接

---

有没有一种方法可以根据祖父母的div宽度更改div的宽度？

如果列数是固定的，那么您可以这样做

假设有3列

width: calc(calc(100% * 3) + 2px) // 2px just added so that it will cover table borders

---

像这样的<代码>$（'.fr行选择器'）.css（'width'，$（'.fr flex table'）.css（'width'））假设这是一个jQuery选择器？如果是这样，它可能会起作用。但对我来说不可能。啊，我不知道那不是一个选择，我的坏习惯几乎完美。嵌套的calc函数在较少的时间内不起作用。嵌套也不是必需的，它可以通过一个Calc函数调用来完成。这对我来说不太管用<代码>宽度：计算（约“100%*3+4px”）