如何使Material UI ExpansionPanel高度填充空间可用

问题描述

我正在使用材料UI ExpansionPanel组件(自定义扩展面板示例).我希望打开的面板可以填充100％的可用空间.

I am working with the Material UI ExpansionPanel component (Customized expansion panels example). I would like the open panels to fill 100% of the space available.

我尝试使用css为ExpansionPanel和ExpansionPanelDetails设置root.height和root.minHeight，但这似乎不起作用:

I have tried using css to set the root.height and root.minHeight fo ExpansionPanel and ExpansionPanelDetails, but that doesn't seem to work:

const ExpansionPanel = withStyles({
  root: {
    height:'100%',
    minHeight:'100%',
  }
})(MuiExpansionPanel);

const ExpansionPanelDetails = withStyles({
  root: {
    height:'100%',
    minHeight:'100%',
  }
})(ExpansionPanelDetails);

这是一个代码框到ExpansionPanel测试.

Here is a codesandbox to for the ExpansionPanel test.

感谢您的帮助

推荐答案

您可以通过 flexGrow:1 实现它，但是扩展面板的父级应该具有 display:'flex'和 flexDirection:'列'属性.您可以分享一个可复制的示例，以获得准确的答案.

You can achieve it through flexGrow: 1, but expansion panel's parent should have display: 'flex' and flexDirection: 'column' properties.You can share a reproducible example in order to get exact answer.

这篇关于如何使Material UI ExpansionPanel高度填充空间可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！