调整反应卡的高度而不包括折叠
调整反应卡的高度而不包括折叠
提问于 2021-01-11 22:07:39
我正在创建一个web界面，其中列出了各种进程和服务。这些都列在React卡片中，这些卡片都支持展开/折叠-展开卡片并显示更多信息。expand中显示的信息在大小和信息上会有所不同，我不希望卡片在扩展时调整高度。当它们折叠时高度是对齐的，但我不确定当卡片展开时如何不调整它们。示例：
此图像显示了卡片高度如何与内容最多的卡片对齐。这正是我想要的行为。
当我展开其中一个盒子时，出现了问题。其他框中的内容将与新的大小对齐。我希望扩展功能不会影响其他卡片的高度。
卡片的自定义类如下所示：
const infoCard = makeStyles({
root: {
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "-webkit-fill-available"
}
})
const createCards:
const classes = infoCard();
...
...
return (
<React.Fragment>
<Card className={classes.root}>
<CardContent> "Add content" </CardContent>
<Collapse>
<CardContent> "Add content" </CardContent>
</Collapse>
</Card>
</React.Fragment>
)我还希望结果支持在这一行下面有额外的卡片行。
有没有人知道如何解决这个问题？提前感谢！
回答 1
Stack Overflow用户
发布于 2021-01-11 23:19:46
您需要将align-items: flex-start;添加到根元素的样式中，默认情况下为其拉伸，这会将所有元素拉伸到相同的高度
const infoCard = makeStyles({
root: {
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "space-between",
height: "-webkit-fill-available"
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65668382
复制相关文章
相似问题
腾讯云开发者
