如何将div的宽度设置为祖父母div答案

【问题标题】：How to set width of div to grandparent div如何将div的宽度设置为祖父母div
【发布时间】：2020-06-03 14:39:01
【问题描述】：

我有一个基于 flexbox 的表格。容器将 flex-direction 设置为 row 和每列一个 flex-item。现在我需要一种方法来突出显示一行中的所有项目。由于每一行分散在多个弹性项目（列）上，我试图创建一个突出显示该行的 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 的大小，以相对于祖父 div 的大小 fr-flex-table 突出显示行。

为了更清楚，我创建了一个 codepen.io 示例。我无法将它整合到这个问题中，因此需要一个指向示例的外部链接。

https://codepen.io/poundfoolish/pen/ExPxEgb

有没有办法根据祖父母的div宽度改变div的宽度？

【问题讨论】：

这样的？ $('.fr-row-selector').css('width', $('.fr-flex-table').css('width'));
假设这是一个 jQuery 选择器？如果是这样，它可能会起作用。但对我来说不可能。
啊不知道这不是一个选择，我的错

标签： html css flexbox

【解决方案1】：

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

假设有 3 列

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

【讨论】：

几乎完美。嵌套的 calc 函数在 Less 中不起作用。嵌套也不是必需的，它可以通过一个 Calc 函数调用来完成。在少这对我有用； width: calc(~"100% * 3 + 4px");