Как сделать доступным заполнение пространства высоты пользовательского интерфейса ExpansionPanel

Question

Я работаю с компонентом ExpansionPanel Material * ( Пример пользовательских панелей расширения ). Я бы хотел, чтобы открытые панели занимали 100% доступного пространства.

Я пытался использовать css для установки root .height и root .minHeight для ExpansionPanel и ExpansionPanelDetails, но, похоже, это не работает:

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

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

Вот кодовые окна для теста ExpansionPanel.

Спасибо за любую помощь

Answer 1

Этого можно достичь с помощью flexGrow: 1, но родительский элемент панели расширения должен иметь свойства display: 'flex' и flexDirection: 'column'. Вы можете поделиться воспроизводимым примером, чтобы получить точный ответ.