在MUI对话框中正确显示可变大小的图像

Question

我有一个MUI对话框，在其中需要显示以下三个内容：

• 应保留其方面但要保留所有剩余空间
的图像
• 横跨1-3行的文字
• 一些输入

应该没有滚动，而图像应该正确缩放。

我所做的事情看起来很糟糕，并且在不同的浏览器中表现不同。

我已经创建了sandbox。

这是在我的withStyles中：

content: { // DialogContent
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'stretch',
},
imageDiv: { // the div enclosing the img
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    flex: '1 1',
    width: '100%',
},
image: { // the img itself
    width: 'auto',
    height: 'auto',
    maxWidth: '80%',
    objectFit: 'contain',
    display: 'block',
    marginLeft: 'auto',
    marginRight: 'auto',
},
text: { // the div with the multiline text
    flex: '1 0',
    margin: 10,
    width: '100%',
},
input: { // the divs with the inputs
    flex: '1 0',
    margin: 10,
    width: '100%',
},

问题：如何使它正常运行，即

• 不滚动，全高
• 在保持宽高比的同时，图像会根据需要调整大小
• 其他所有东西都保持原样