Html 在1个容器中的另一个div上方安装可滚动div

我正在react中处理消息仪表板，我需要使包含消息的区域可滚动，但仅当消息到达div的底部时

我有一个容器div，里面有两个div：messages div（深蓝色）和chat area div（浅蓝色）

唯一的问题是，当插入新行时，聊天区的高度可能会改变。 作为临时解决方案，我使用了70%的

maxHeight

属性

以下是代码（删除了不必要的部分）：

常量样式=（主题）=>({
容器：{
高度：“100%”，
boxShadow:theme.shadows[1]，
},
对话：{
高度：“自动”，
最大高度：“70%”，
溢出：“自动”，
背景颜色：“蓝色”，
填充：“5%6%10%6%”，
},
chatInput:{}
});
类ChatArea扩展了React.Component{
componentDidMount（）{
const{chatId，fetchMessages}=this.props；
获取消息（{chatId}）；
}
componentDidUpdate（prevProps）{
const{fetchMessages，chatId}=this.props；
if（prevProps.chatId！==chatId）{
获取消息（{chatId}）；
}
}
render（）{
常数{
信息、课程、酒店，
}=这是道具；
返回(
{
messages.map（（message）=>(
))
}
);
}
}

是否有一种方法可以使

maxHeight

属性正好适合聊天输入区未占用的区域

编辑：

---

它必须与IE兼容：（

当一个元素溢出时，您可以使用

网格

自动扩展高度：滚动

POC：


.container{
显示：网格；
网格模板列：自动；
网格模板行：自动；
边框：实心；
高度：150像素；
}
.a{
溢出：滚动；
}
A.
.b{
边框：实心1px；
填充：10px；
}

文本
文本
文本
文本
文本
文本
文本
文本

文本
文本
谢谢，伙计！不幸的是，它必须在IE上运行，我编辑了我的问题

const styles = (theme) => ({
  container: {
    height: '100%',
    boxShadow: theme.shadows[1],
  },
  conversation: {
    height: 'auto',
    maxHeight: '70%',
    overflow: 'auto',
    backgroundColor: 'blue',
    padding: '5% 6% 10% 6%',
  },
  chatInput: {}
});


class ChatArea extends React.Component {

  componentDidMount() {
    const { chatId, fetchMessages } = this.props;
    fetchMessages({ chatId });
  }

  componentDidUpdate(prevProps) {
    const { fetchMessages, chatId } = this.props;
    if (prevProps.chatId !== chatId) {
      fetchMessages({ chatId });
    }
  }

  render() {
    const {
      messages, classes, hotel_obj,
    } = this.props;

    return (
      <Grid id="chat-area" container direction="column" justify="space-between" alignItems="strech" className={classes.container}>
        <Grid item className={classes.conversation}>
            <List>
              {
                messages.map((message) => (
                  <Message
                    hotel_obj={hotel_obj}
                    message={message}
                  />
                ))
              }
            </List>
        </Grid>
        <Grid id="chat-id" item className={classes.chatInput}>
          <ChatInput />
        </Grid>
      </Grid>
    );
  }
}