仅用CSS如何让不同父级的元素与另一元素保持相同宽高？

可以实现，目前有多个纯CSS方案满足需求，无需JavaScript、无需空白占位结构、无固定尺寸、完全响应式，代码简洁：

方案1：anchor-size() 锚点尺寸绑定（最贴合需求） #

兼容版本：Chrome 125+、Edge 125+、Safari 17.4+
这个方案可以直接绑定任意DOM元素的尺寸，完全不受父层级限制，不需要计算比例，源元素尺寸变化时目标元素会自动同步。
实现代码如下：

<div class="parent1">
    <div id="child1-width">a</div>
    <div>b</div>
    <div>c</div>
</div>
<div class="parent2">
    <div></div>
</div>

.parent1 {
  display: flex;
}
.parent1 > div {
  flex: 1; /* 三个子元素等分父容器宽度 */
}
/* 给源元素定义锚点名 */
#child1-width {
  anchor-name: --child1-ref;
}
/* 目标元素直接引用锚点的宽度 */
.parent2 > div {
  width: anchor-size(--child1-ref width);
}

方案2：容器查询单位（兼容性更好） #

兼容版本：Chrome 105+、Firefox 110+、Safari 16+
如果需要兼容更旧的浏览器，可以用容器查询单位实现，核心是把源元素的父容器声明为查询容器，之后任意位置的元素都可以引用该容器的尺寸单位计算对应宽度。
实现代码如下：

/* 声明parent1为行内尺寸查询容器，自定义容器名避免冲突 */
.parent1 {
  display: flex;
  container-type: inline-size;
  container-name: child1-container;
}
.parent1 > div {
  flex: 1;
}
/* 目标元素宽度为容器宽度的1/3，和child1-width的等分宽度完全一致 */
.parent2 > div {
  width: 33.333cqw;
  container: child1-container;
}

方案3：Subgrid 轨道同步（适合父元素同级的场景） #

兼容版本：Chrome 117+、Firefox 71+、Safari 16+
如果两个父元素.parent1和.parent2是同一个顶级Grid容器的直接子元素，可以用Subgrid同步列轨道，自动实现内部元素宽度对齐：

/* 顶级容器定义3列等宽Grid */
.top-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.parent1, .parent2 {
  /* 继承顶级容器的列轨道 */
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

这种场景下.parent2里的第一个子元素会自动和.parent1里的第一个子元素宽度完全一致，不需要额外定义尺寸。

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