将可滚动div放在1个容器中的另一个div之上

Question

我正在React中的消息传递仪表板上工作，我需要使消息区域可滚动，但仅当消息到达div底部时才可以滚动。

我有一个容器div，其中有2个div：消息div（深蓝色）和聊天区域div（浅蓝色）。

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

这里是代码（删除了不必要的部分）：

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>
    );
  }
}

maxHeight属性是否完全适合聊天输入区域未占用的区域？

编辑：它必须与IE兼容：（

Answer 1

当一个元素与grid一起使用时，您可以使用overflow: scroll自动扩展高度。

一个POC：

.container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  border: solid;
  height: 150px;
}

.a {
  overflow: scroll;
}

.a,
.b {
  border: solid 1px;
  padding: 10px;
}

<div class="container">
  <div class="a">text<br>text<br>text<br> text<br>text<br>text<br>text<br></div>
  <div class="b">text<br>text</div>

</div>