HTML/CSS/JS实现冰柱图时如何对齐子元素组？现有偏移方案有偏差求优解

我想要使用HTML/CSS/JS复刻包含大量节点的冰柱图（icicle graph），冰柱图的基础效果可自行搜索了解。我知道有D3这类库可以实现该效果，之前也使用过相关库，但无法自定义到符合我的需求。

我需要实现的布局效果为：将子元素堆叠在对应父元素的下方，可参考布局示意效果图直观了解要求。

上述图片仅为我期望实现的效果的可视化示意。页面的行是动态生成的，我仅需要按照以下规则完成正确对齐：
子元素组需对齐堆叠到对应的父元素下方

我目前使用div元素尝试了以下方案：

• 获取父元素的左偏移量
• 基于计算得到的偏移量将子元素堆叠到父元素下方
• 保证元素的响应式适配

该方案接近可用，但最终实现的元素仍存在偏移问题。

如果有其他更简单的、使用CSS Grid或HTML Table实现该布局的方案，希望能得到指点。

现有实现的代码如下：
配色不做要求，仅用于可视化展示；我将子元素放置在父元素下方，并用相同颜色标记以便更清晰区分。

JS 代码 #

function move_childs(child_id, parent_id) {

  const parent = document.getElementById(parent_id)
  const child = document.getElementById(child_id)

  const parent_width_perc = parseInt(parent.style.width)
  const parent_width_px = parent.offsetWidth

  const parent_offset_px = parent.offsetLeft

  // make responsible - calc offset in % 
  // widht % = width px
  // offset % = offset px

  const parent_offset_perc = parent_width_perc * parent_offset_px / parent_width_px

  child.style.position = 'fixed'
  child.style.left = parent_offset_perc + '%'
}

move_childs('blue-child', 'blue-parent')
move_childs('red-child', 'red-parent')

CSS 代码 #

div {
  display: inline-block;
  height: 35px;
}

#gray-parent {
  background: rgba(0, 0, 0, 0.35);
}

#blue-parent,
#blue-child {
  background: rgba(0, 0, 255, 0.5)
}

#red-parent,
#red-child {
  background: rgba(255, 0, 0, 0.5);
}

HTML 代码 #

<div id="gray-parent" style="width:10%"></div>
<div id="blue-parent" style="width:60%"></div>
<div id="red-parent" style="width:20%"></div>

<br>


<div id="blue-child" style="width: 30%">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>


<div id="red-child" style="width: 10%">
  <div class="child"></div>
  <div class="child"></div>
</div>

内容的提问来源于stack exchange，提问作者Systems Rebooter