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

Я работаю с компонентом Material UI ExpansionPanel (Пример настраиваемых панелей расширения). Я хотел бы, чтобы открытые панели заполняли 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.

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


person arhnee    schedule 30.01.2020    source источник


Ответы (1)


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

person Muhammad Ali    schedule 30.01.2020
comment
Спасибо Мухаммад. Я пробовал это, но пока не удалось заставить его работать. Вот ссылка на codeandbox с ExpansionPanel: codesandbox.io /с/ - person arhnee; 30.01.2020