如何用flexbox使Material UI Stack的Item 2满宽且不使用width:100%？

原代码里的Stack组件默认是垂直方向的flex容器，且设置了alignItems="flex-start"，这会让所有子Item仅按自身内容宽度显示，无法占满父容器水平空间。

要实现让<Item>Item 2</Item>占满父容器宽度且不使用width: 100%，可以借助flexbox的alignSelf属性：

• 给目标Item添加sx={{ alignSelf: 'stretch' }}配置
• 原理：在垂直方向的flex容器中，交叉轴为水平方向，alignSelf: 'stretch'会强制该子元素在交叉轴方向拉伸至父容器的宽度，完全遵循flexbox布局规则

完整代码示例：

<Box sx={{ width: '100%' }}>
  <Stack spacing={2} alignItems="flex-start">
    <Item>Item 1</Item>
    <Item sx={{ alignSelf: 'stretch' }}>Item 2</Item>
    <Item>Item 3</Item>
  </Stack>
</Box>

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