如何使一个网格列中的一个组件相对于单个列中的其他两个组件的高度进行调整？

Question

我有两个网格列。第一个网格列有两个项目(div-1和div-2)。第二列有一项(div-3)。我想让div-3的高度随着div-1和div-2的变化而调整。

这样两列的高度将与下面的css相同。

<Grid>
<GridItem>
  <Grid>
   <GridItem >
     <SomeComponent className="div-1"/>
   </GridItem>
   <GridItem >
     <SomeComponent className="div-2"/>
   </GridItem>
  </Grid>
</GridItem>
<GridItem >
  <Grid>
   <GridItem>
     <SomeComponent className="div-3"/> 
   </GridItem>
  </Grid>
</GridItem>
</Grid>

当前css：

.div-1 {
  max-height: 19rem;
  min-height: 6rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.div-3 {
  max-height: 30rem;
  overflow-x: hidden;
  overflow-y: auto;
}

我尝试在react中使用useRef，但在组件之间传递状态时遇到了问题。有些项目需要显示滚动条，我不想删除它。

Answer 1

这是CSS网格的一个经典用例。

它不是react，但将其转换为您的项目应该不会太难。

<div class="grid">
  <div class="item item1">1<br />asdqwe</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

而神奇的事情发生在CSS中

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* create grid with 2 dynamic columns */
}
.item3 {
  grid-row: 1 / span 30; /* span 30 rows just to be sure the 3rd item really spans all rows */
  grid-column-start: 2; /* set it to show up in the second column */
}

演示代码为：https://jsfiddle.net/7vga2yqc/2/的JSFiddle