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

Question

我有两个网格列。第一个网格列有两个元素(div-1 和 div-2)。第二列有一项 (div-3)。我想根据 div-1 和 div-2 的变化调整 div-3 的高度。

这样两列将具有与以下 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 */
}

带有演示代码的 JSFiddle:https://jsfiddle.net/7vga2yqc/2/