当父高度未固定并且alignItems设置为居中时，我无法让子高度填充父高度

Question

这是我正在使用的代码：

function App() {
  return (
    <div
      style={{
        display: 'flex',
        gap: '1rem',
        border: '1px solid red',
        alignItems: 'center',
      }}
    >
      <div style={{ height: '100%', border: '1px solid black' }}>Div 1</div>
      <div style={{ height: '5rem', border: '1px solid black' }}>Div 2</div>
    </div>
  );
}

结果如下所示：

如何在不触及父级的 css 的情况下获得 Div1 高度来填充父级高度（或匹配 Div2 的高度）？

请注意，我无权访问父组件，因此无法修改其 css。另请注意，虽然本示例中 Div2 的高度是固定的，但实际上它是动态变化的，并且我希望 Div1 在 Div2 的高度发生变化时动态调整其高度。

这是图像中显示的组件的 stackblitz 链接：https://stackblitz.com/edit/vitejs-vite-jrpj4f?file=src%2FApp.tsx

Answer 1

给需要的孩子

align-self: stretch;

.parent {
  display: inline-flex;
  align-items: center;
  border: 1px solid red;
  padding: .25em;
  gap: 1rem;
}

.item {
  border: 1px solid grey;
  align-self: stretch;
}

.item:nth-child(2) {
  height: 5rem;
}

<div class="parent">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>